:root{

--azul:#4da3ff;
--azul-claro:#eaf5ff;
--preto:#111111;
--cinza:#f5f5f5;
--branco:#ffffff;

}


body{

font-family:'Poppins',Arial,sans-serif;

background:#fff;

color:#333;

}


.box{

padding:70px 0;

}



.section-title{

text-align:center;

font-weight:700;

font-size:35px;

margin-bottom:40px;

color:var(--preto);

}



.slider{

height:650px;

background-size:cover;

background-position:center;

display:flex;

align-items:center;

position:relative;

color:white;

}



.slider:before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}



.slider .container{

position:relative;

z-index:2;

}



.slider h1{

font-size:55px;

font-weight:700;

}



.btn-primary{

background:#4da3ff;

border:none;

padding:12px 30px;

border-radius:30px;

}



.card{

border:none;

box-shadow:0 10px 30px rgba(0,0,0,.08);

border-radius:20px;

overflow:hidden;

}



.card img{

height:220px;

object-fit:cover;

}



.culto{

background:#fff;

padding:30px;

border-radius:20px;

box-shadow:0 10px 25px #ddd;

text-align:center;

}



.icon{

font-size:40px;

color:#4da3ff;

}



.pix-box{

background:#f5f5f5;

padding:40px;

border-radius:25px;

text-align:center;

}



.instagram{

background:#111;

color:white;

padding:60px 0;

}



.footer{

background:#111;

color:white;

padding:40px;

}

/* MENU PRINCIPAL */

.menu-site{

background:#ffffff;

height:90px;

box-shadow:0 2px 15px rgba(0,0,0,.08);

position:relative;

z-index:1000;

}



.logo-area{

display:flex;

align-items:center;

}



.logo-igreja{

height:130px;

width:auto;

object-fit:contain;

}




.nav-link{

font-family:'Poppins',Arial,sans-serif;

font-size:16px;

font-weight:500;

color:#222 !important;

margin-left:25px;

transition:.3s;

}



.nav-link:hover{

color:#4da3ff !important;

}





.navbar-toggler{

border:1px solid #ddd;

}



.navbar-toggler-icon{

filter:invert(1);

}

.membro-area{

background:#f5faff;

}


.membro-area h2{

font-size:40px;

font-weight:700;

}


.membro-area p{

font-size:18px;

line-height:1.7;

}

.voltar-area{

position:absolute;

top:25px;

left:25px;

}


.btn-voltar{

width:45px;

height:45px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#1e293b;

text-decoration:none;

box-shadow:0 5px 15px #0003;

transition:.3s;

}



.btn-voltar:hover{

background:#4da3ff;

color:white;

transform:scale(1.1);

}




.titulo-area{

margin-top:-40px;

background:white;

border-radius:30px 30px 0 0;

padding:30px 20px 10px;

}



.pix-card{

background:linear-gradient(135deg,#eaf5ff,#ffffff);

border-radius:25px;

padding:30px;

margin-top:20px;

}



.qrcode{

width:240px;

border-radius:20px;

padding:15px;

background:white;

box-shadow:0 10px 25px #0002;

}



.pix-chave{

background:#1e293b;

color:white;

border-radius:15px;

padding:15px;

font-size:18px;

}



.btn-whatsapp{

background:#25D366;

color:white;

border-radius:15px;

padding:15px;

font-weight:600;

}



.btn-whatsapp:hover{

background:#128C7E;

color:white;

}

.timeline-box{

max-width:800px;

margin:auto;

}



.timeline-card{


background:white;

padding:25px;

border-radius:25px;

margin-bottom:25px;

box-shadow:0 10px 25px #0001;


}



.perfil-post{


display:flex;

align-items:center;

gap:15px;


}



.perfil-post img{


width:55px;

height:55px;

border-radius:50%;

object-fit:cover;


}



.timeline-card p{


font-size:16px;

color:#374151;


}

.chat-area-home{

background:#f8fafc;

border-radius:25px;

padding:20px;

box-shadow:0 10px 30px #0001;

}



.membro-area{

background:#ffffff;

}



.pix-box{

background:white;

padding:40px;

border-radius:30px;

box-shadow:0 10px 30px #0001;

}



.culto{

background:white;

padding:30px;

border-radius:25px;

height:100%;

box-shadow:0 10px 25px #0001;

transition:.3s;

}



.culto:hover{

transform:translateY(-5px);

}



.instagram{

padding:70px 0;

background:#f1f5f9;

}



.card{

border:none;

border-radius:25px;

overflow:hidden;

box-shadow:0 10px 25px #0001;

}



.card img{

height:220px;

object-fit:cover;

}

.chat-container{

background:white;

padding:20px;

border-radius:25px;

box-shadow:0 10px 30px #0002;

}



#mensagens{

height:450px;

overflow-y:auto;

background:#f1f5f9;

padding:20px;

border-radius:20px;

}



.mensagem-chat{

display:flex;

gap:12px;

background:white;

padding:12px;

border-radius:20px;

margin-bottom:12px;

box-shadow:0 3px 10px #0001;

}



.mensagem-chat img{

width:45px;

height:45px;

border-radius:50%;

object-fit:cover;

}



.mensagem-chat p{

margin:5px 0;

}



.mensagem-chat span{

font-size:11px;

color:#888;

}

.chat-container{

background:#fff;

border-radius:25px;

padding:20px;

box-shadow:0 10px 30px #0002;

}



.chat-header{

background:#4da3ff;

color:white;

padding:18px;

border-radius:20px 20px 0 0;

font-size:22px;

font-weight:600;

}



.chat-header small{

display:block;

font-size:13px;

opacity:.8;

}



#mensagens{

height:450px;

overflow-y:auto;

padding:20px;

background:#eef3f8;

}



.chat-input{

display:flex;

gap:10px;

margin-top:15px;

}



.chat-input input{

border-radius:20px;

padding:15px;

}



.chat-input button{

border-radius:20px;

padding:0 30px;

}

.msg{
    display:flex;
    gap:12px;
    margin-bottom:15px;
    align-items:flex-start;
}

.avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #4da3ff;
    flex-shrink:0;
}

.conteudo{
    flex:1;
    background:#fff;
    border-radius:18px;
    padding:12px 15px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.topo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.topo strong{
    color:#1e293b;
}

.topo small{
    color:#888;
    font-size:12px;
}

.texto{
    white-space:pre-wrap;
    word-break:break-word;
    font-size:15px;
}

.acoes{
    margin-top:10px;
}

.btn-like{
    border:0;
    background:#f3f4f6;
    padding:6px 12px;
    border-radius:20px;
    cursor:pointer;
}

.btn-like:hover{
    background:#4da3ff;
    color:#fff;
}

.msg{
    display:flex;
    gap:12px;
    margin-bottom:18px;
}

.avatar{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.conteudo{
    background:#fff;
    border-radius:15px;
    padding:12px;
    flex:1;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.topo{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.btn-menu{
    background:none;
    border:none;
    font-size:22px;
    cursor:pointer;
    color:#666;
}

.btn-menu:hover{
    color:#0d6efd;
}

.texto{
    margin-top:10px;
    white-space:pre-wrap;
}

.acoes{
    margin-top:10px;
}

.btn-like{
    border:none;
    background:#f3f4f6;
    border-radius:20px;
    padding:5px 12px;
    cursor:pointer;
}

.btn-like:hover{
    background:#0d6efd;
    color:#fff;
}

.btn-like{

border:0;

background:#ececec;

padding:6px 14px;

border-radius:20px;

cursor:pointer;

transition:.3s;

}

.btn-like.liked{

background:#1877F2;

color:#fff;

}

.btn-like{
    border:0;
    background:#ececec;
    padding:6px 15px;
    border-radius:20px;
    cursor:pointer;
    transition:.3s;
}

.btn-like:hover{
    background:#ddd;
}

.btn-like.liked{
    background:#1877f2;
    color:#fff;
}

.foto-status{

position:relative;

width:38px;

height:38px;

}



.mini-foto-online{

width:38px;

height:38px;

border-radius:50%;

object-fit:cover;

display:block;

border:2px solid #fff;

box-shadow:0 2px 8px rgba(0,0,0,.2);

}



.bolinha-online{

position:absolute;

right:-1px;

bottom:0;

width:12px;

height:12px;

background:#22c55e;

border-radius:50%;

border:2px solid #fff;

}

.usuarios-box{

background:white;

border-radius:20px;

padding:15px;

margin-bottom:15px;

overflow:hidden;

}



.usuarios-online-lista{

display:flex;

gap:15px;

align-items:center;

overflow-x:auto;

}



.usuario-online-item{


text-align:center;

min-width:60px;


}



.foto-online{


position:relative;

width:50px;

height:50px;

margin:auto;


}



.foto-online img{


width:50px;

height:50px;

border-radius:50%;

object-fit:cover;

border:3px solid white;

box-shadow:0 3px 10px #0003;


}



.foto-online span{


position:absolute;

right:0;

bottom:2px;

width:14px;

height:14px;

background:#22c55e;

border-radius:50%;

border:2px solid white;


}



.nome-online{


font-size:11px;

margin-top:5px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

max-width:60px;


}

.instagram{

    background: linear-gradient(135deg,#405DE6,#5851DB,#833AB4,#C13584,#E1306C,#FD1D1D,#F56040,#FCAF45);
    padding:70px 0;

}

.instagram-box{

    max-width:900px;
    margin:auto;
    color:#fff;
    padding:50px;
    border-radius:25px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.instagram-icon{

    font-size:70px;

}

.instagram h2{

    font-size:40px;
    font-weight:700;

}

.instagram p{

    font-size:20px;
    opacity:.95;

}

.instagram h3{

    font-size:32px;
    font-weight:700;

}

.instagram .btn{

    font-size:20px;
    font-weight:bold;
    border-radius:50px;
    transition:.3s;

}

.instagram .btn:hover{

    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.30);

}

@media(max-width:768px){

    .instagram-box{

        padding:30px 20px;

    }

    .instagram h2{

        font-size:30px;

    }

    .instagram p{

        font-size:18px;

    }

}

/* ===========================
   EVENTOS HOME
=========================== */

.eventos-home{

background:#f7f9fc;

}

.evento-card{

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

position:relative;

height:100%;

}

.evento-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 50px rgba(0,0,0,.18);

}

.evento-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#004aad,#1b75ff,#00b4ff);

}

.evento-data{

background:linear-gradient(135deg,#004aad,#0066ff);

color:#fff;

padding:25px;

text-align:center;

}

.evento-data .dia{

display:block;

font-size:42px;

font-weight:bold;

line-height:1;

}

.evento-data .mes{

display:block;

margin-top:5px;

font-size:18px;

letter-spacing:2px;

}

.evento-body{

padding:30px;

}

.evento-body h4{

font-weight:700;

margin-bottom:20px;

min-height:60px;

}

.evento-body p{

font-size:17px;

color:#555;

margin-bottom:12px;

}

.evento-body .btn{

margin-top:15px;

border-radius:30px;

padding:12px 30px;

transition:.3s;

}

.evento-body .btn:hover{

transform:scale(1.05);

}

/* ==========================
   DÍZIMOS
========================== */

.dizimos-section{

background:linear-gradient(135deg,#0d6efd,#004aad);
padding:80px 0;

}

.dizimos-card{

background:rgba(255,255,255,.12);

backdrop-filter:blur(10px);

border-radius:25px;

padding:60px;

color:#fff;

box-shadow:0 20px 50px rgba(0,0,0,.20);

overflow:hidden;

position:relative;

}

.dizimos-card::before{

content:"";

position:absolute;

width:250px;

height:250px;

border-radius:50%;

background:rgba(255,255,255,.08);

top:-120px;

right:-80px;

}

.dizimos-card h2{

font-size:42px;

font-weight:700;

margin-bottom:20px;

}

.dizimos-card p{

font-size:19px;

line-height:1.8;

opacity:.95;

}

.dizimos-card .btn{

padding:15px 35px;

border-radius:50px;

font-size:18px;

font-weight:bold;

transition:.35s;

}

.dizimos-card .btn:hover{

transform:translateY(-5px) scale(1.05);

box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.pix-icon{

font-size:120px;

animation:flutuar 3s ease-in-out infinite;

position:relative;

z-index:2;

}

.pix-pulse{

width:120px;

height:120px;

background:rgba(255,255,255,.20);

border-radius:50%;

position:absolute;

left:50%;

transform:translateX(-50%);

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:translateX(-50%) scale(.8);

opacity:1;

}

100%{

transform:translateX(-50%) scale(2);

opacity:0;

}

}

@keyframes flutuar{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:768px){

.dizimos-card{

padding:35px;

text-align:center;

}

.dizimos-card h2{

font-size:32px;

}

.pix-icon{

margin-top:40px;

font-size:90px;

}

}

/* ===============================
   ÁREA DO MEMBRO
=============================== */

.membro-home{

padding:90px 0;

background:linear-gradient(135deg,#0b4fa2,#0d6efd,#5ba9ff);

overflow:hidden;

position:relative;

}

.membro-home::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:rgba(255,255,255,.08);

border-radius:50%;

top:-180px;

left:-150px;

animation:girar 20s linear infinite;

}

.membro-home::after{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(255,255,255,.05);

border-radius:50%;

bottom:-120px;

right:-120px;

animation:girar2 25s linear infinite;

}

.membro-card{

background:rgba(255,255,255,.12);

backdrop-filter:blur(12px);

padding:50px;

border-radius:30px;

box-shadow:0 20px 60px rgba(0,0,0,.25);

position:relative;

z-index:2;

color:#fff;

}

.imagem-membro{

position:relative;

overflow:hidden;

border-radius:25px;

}

.imagem-membro img{

border-radius:25px;

transition:.5s;

}

.imagem-membro:hover img{

transform:scale(1.08);

}

.luz{

position:absolute;

top:-100%;

left:-100%;

width:200%;

height:200%;

background:linear-gradient(
45deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transform:rotate(25deg);

animation:brilho 5s infinite;

}

.membro-card h2{

font-size:48px;

font-weight:700;

margin-bottom:20px;

}

.recursos{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin-top:30px;

margin-bottom:30px;

}

.recursos div{

background:rgba(255,255,255,.12);

padding:15px;

border-radius:15px;

transition:.3s;

}

.recursos div:hover{

transform:translateY(-6px);

background:rgba(255,255,255,.22);

}

.membro-card .btn{

padding:14px 35px;

border-radius:40px;

font-weight:bold;

transition:.3s;

}

.membro-card .btn:hover{

transform:translateY(-5px);

}

@keyframes brilho{

0%{

left:-120%;

}

100%{

left:120%;

}

}

@keyframes girar{

100%{

transform:rotate(360deg);

}

}

@keyframes girar2{

100%{

transform:rotate(-360deg);

}

}

@media(max-width:768px){

.membro-card{

padding:30px;

text-align:center;

}

.recursos{

grid-template-columns:1fr;

}

.membro-card h2{

font-size:34px;

margin-top:25px;

}

}

.mensagem-bloqueada{

background:#f1f1f1;

border-radius:12px;

padding:15px;

text-align:center;

color:#777;

font-size:14px;

}


.texto-blur{

filter:blur(4px);

display:inline-block;

color:#999;

user-select:none;

}


.foto-censurada{

filter:blur(5px);

}

/* =========================
   BANNER MODERNO
========================= */


.slider{

height:650px;

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

animation:zoomBanner 15s infinite alternate;

}



.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

rgba(0,0,0,.75),

rgba(0,0,0,.35)

);

}



.slider-content{

position:relative;

z-index:2;

color:#fff;

max-width:800px;

animation:entradaBanner 1.2s ease;

}



.slider h1{

font-size:60px;

font-weight:800;

line-height:1.1;

text-shadow:0 5px 20px rgba(0,0,0,.5);

}



.slider p{

font-size:24px;

margin-top:20px;

line-height:1.6;

text-shadow:0 3px 10px rgba(0,0,0,.5);

}



@keyframes zoomBanner{


0%{

transform:scale(1);

}


100%{

transform:scale(1.08);

}


}



@keyframes entradaBanner{


from{

opacity:0;

transform:translateY(60px);

}


to{

opacity:1;

transform:translateY(0);

}


}



@media(max-width:768px){


.slider{

height:500px;

}


.slider h1{

font-size:38px;

}


.slider p{

font-size:18px;

}


}

/* =========================
   TOPO DO SITE
========================= */


.topo-site{

background:#fff;

padding:15px 30px;

position:relative;

z-index:999;

box-shadow:0 5px 20px rgba(0,0,0,.12);

}



.header-flex{

display:flex;

align-items:center;

justify-content:space-between;

}



.logo-area{

width:180px;

}



.logo-igreja{

width:160px;

height:auto;

transition:.4s;

}



.logo-igreja:hover{

transform:scale(1.08);

}





/* NOME IGREJA */

.nome-igreja{

text-align:center;

flex:1;

}



.nome-igreja h1{

font-family:'Cinzel',serif;

font-size:38px;

font-weight:700;

letter-spacing:3px;

margin:0;

color:#0b4fa2;

}



.nome-igreja h2{

font-family:'Cinzel',serif;

font-size:20px;

letter-spacing:8px;

margin-top:5px;

color:#555;

}





/* MENU */

.menu-principal{

display:flex;

gap:25px;

align-items:center;

}



.menu-principal a{

text-decoration:none;

font-size:17px;

font-weight:600;

color:#333;

position:relative;

transition:.3s;

}



.menu-principal a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:3px;

background:#0d6efd;

transition:.3s;

}



.menu-principal a:hover{

color:#0d6efd;

}



.menu-principal a:hover::after{

width:100%;

}





@media(max-width:1100px){


.header-flex{

flex-direction:column;

gap:20px;

}


.nome-igreja h1{

font-size:28px;

}


.menu-principal{

flex-wrap:wrap;

justify-content:center;

}


}



@media(max-width:600px){


.logo-area{

text-align:center;

}


.nome-igreja h1{

font-size:22px;

letter-spacing:1px;

}


.nome-igreja h2{

font-size:15px;

letter-spacing:3px;

}


.menu-principal{

gap:15px;

}


}

.menu-principal ul{

display:flex;

align-items:center;

gap:25px;

list-style:none;

padding:0;

margin:0;

}


.menu-principal a{

text-decoration:none;

font-weight:600;

color:#333;

transition:.3s;

}


.menu-principal a:hover{

color:#0b4fa2;

}