body{
font-family:'Inter',sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.font-kalam{
font-family:'Kalam',cursive;
}
.gradient-text{
background:linear-gradient(45deg,#F27233,#FFCB2E);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.gradient-orange{
background:linear-gradient(135deg,#F27233 0%,#FF8C42 100%);
}
.gradient-green{
background:linear-gradient(135deg,#10B981 0%,#34D399 100%);
}
.bg-pattern{
background-image:radial-gradient(circle at 2px 2px,#e5e7eb 1px,transparent 0);
background-size:60px 60px;
}
.nav-link{
color:#374151;
font-weight:600;
font-size:1rem;
letter-spacing:0.05em;
position:relative;
transition:color 0.3s ease;
}
.nav-link::after{
content:'';
position:absolute;
width:0;
height:2px;
bottom:-6px;
left:50%;
transform:translateX(-50%);
background-color:#F27233;
transition:width 0.3s ease;
}
.nav-link:hover{
color:#F27233;
}
.nav-link:hover::after{
width:100%;
}
.social-icon{
color:#4B5563;
font-size:1.5rem;
transition:color 0.3s ease,transform 0.3s ease;
padding:0.5rem;
border-radius:0.5rem;
}
.social-icon:hover{
color:#F27233;
transform:scale(1.1);
background-color:rgba(242,114,51,0.1);
}
.donate-button{
display:flex;
align-items:center;
gap:0.5rem;
padding-left:1.5rem;
padding-right:1.5rem;
padding-top:0.75rem;
padding-bottom:0.75rem;
color:#fff;
font-weight:700;
font-size:0.875rem;
border-radius:9999px;
background-color:#558E3E;
transition:all 0.3s ease;
box-shadow:0 4px 6px -1px rgba(85,142,62,0.3);
}
.donate-button:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px -5px rgba(85,142,62,0.5);
background-color:#4a7a35;
}
.nav-link-mobile{
color:#1F2937;
font-weight:700;
font-size:1.125rem;
text-align:center;
display:block;
padding-top:0.5rem;
padding-bottom:0.5rem;
border-radius:0.375rem;
transition:background-color 0.3s ease,color 0.3s ease;
}
.nav-link-mobile:hover{
background-color:#fef3c7;
color:#F27233;
}
.donate-button-mobile{
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
width:100%;
margin-top:1rem;
padding-left:1.5rem;
padding-right:1.5rem;
padding-top:0.875rem;
padding-bottom:0.875rem;
color:#fff;
font-weight:700;
border-radius:0.75rem;
box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
background-color:#558E3E;
transition:all 0.3s ease;
}
.donate-button-mobile:hover{
background-color:#4a7a35;
transform:translateY(-2px);
box-shadow:0 15px 25px -5px rgba(85,142,62,0.4);
}

/* =============================================== */
/* BARRA DE SCROLL PERSONALIZADA - PISADA DO SERTÃO */
/* =============================================== */

/* Para navegadores WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px; /* Largura da barra vertical */
    height: 12px; /* Altura da barra horizontal */
}

::-webkit-scrollbar-track {
    background: #f1f5f9; /* Cor de fundo da trilha (cinza claro) */
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #F27233, #FFCB2E); /* Gradiente das cores da Pisada */
    border-radius: 10px;
    border: 2px solid #f1f5f9; /* Borda para criar espaçamento */
    box-shadow: 0 2px 6px rgba(242, 114, 51, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #e55a1f, #f4c430); /* Cores mais escuras no hover */
    box-shadow: 0 4px 12px rgba(242, 114, 51, 0.5);
    transform: scale(1.05);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(45deg, #d14a1a, #e6b82e); /* Cores ainda mais escuras quando pressionado */
}

::-webkit-scrollbar-corner {
    background: #f1f5f9; /* Cor do canto onde as barras se encontram */
}

/* Para Firefox */
* {
    scrollbar-width: thin; /* Espessura da barra */
    scrollbar-color: #F27233 #f1f5f9; /* Cor do thumb e da trilha */
}

/* Animação suave para a barra de scroll */
::-webkit-scrollbar-thumb {
    transition: all 0.3s ease;
}

/* Barra de scroll em containers específicos */
.scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #F27233, #FFCB2E);
    border-radius: 6px;
    border: 1px solid #f1f5f9;
}

/* =============================================== */
/* RESPONSIVIDADE DA BARRA DE SCROLL */
/* =============================================== */

/* Mobile - Barra mais fina */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 6px;
        border: 1px solid #f1f5f9;
    }
}

/* Desktop - Barra mais robusta */
@media (min-width: 1024px) {
    ::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 12px;
        border: 3px solid #f1f5f9;
    }
}