/* Reset geral do body */
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to right, #f5ecdf, #ede4b9);
    color: #000000;
}
html {
  scroll-behavior: smooth;
}

/* Container com leve sombra e destaque */
.container {
    padding: 30px 20px;
}
.form-control,
.form-select {
    height: 45px;
}
/* Cabeçalho */
.site-header {
    position: sticky;
    top: 0;              /* ESSENCIAL */
    left: 0;             /* garante alinhamento */
    width: 100%;         /* ocupa toda a largura */
    z-index: 1000;       /* fica acima de tudo */

    background: linear-gradient(135deg, #c5260a, #861007, #c71111);
    padding: 10px 20px;  /* aumentei um pouco pra ficar melhor */
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.site-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffda44; 
    margin: 0;
}
.carrossel-container {
    position: relative;
    display: flex;
    align-items: center;
}

.carrossel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 10px;
}

.carrossel::-webkit-scrollbar {
    display: none;
}

.card-item {
    min-width: 280px;
    max-width: 280px;
    flex: 0 0 auto;
}

.seta {
    background: #8B0000;
    color: white;
    border: none;
    font-size: 22px;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 50%;
    position: absolute;
    z-index: 10;
    opacity: 0.8;
}

.seta:hover {
    opacity: 1;
}

.esquerda {
    left: -10px;
}

.direita {
    right: -10px;
}
.texto {
    padding: 20px;
    border-radius: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.texto h2 {
    color: #ff6600; /* laranja tipo destaque */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.texto p {
    text-align: justify;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.site-header nav a {
    color: #ffffff;
    margin-left: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}
.icon-btn {
        font-size: 1.25rem; /* aumenta o tamanho dos ícones */
        cursor: pointer;
        transition: color 0.3s ease;
        margin-right: 10px;
    }
    .icon-btn:hover {
        color: #26b909; /* cor laranja do bootstrap ao passar o mouse */
    }
    .icon-danger:hover {
        color: #dc3545; /* vermelho no hover para ícone de excluir */
    }
    .icon-warning:hover {
        color: #fffefb; /* amarelo para editar */
    }

.site-header nav a:hover {
    color: #000000;
}
.botoes {
    background: linear-gradient(45deg, #d61111, #8d0707);
    border: none;
    color: white !important;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.963);
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
    margin: 20px auto; /* centraliza horizontalmente */
    width: 200px; /* largura fixa para um visual consistente */
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* impede quebra de linha */
}
.btnform {
    background: linear-gradient(45deg, #129cdd, #1fb8ff);
    border: none;
    color: white !important;
    font-weight: 600;
    font-size: 1rem;
    padding: 8px 20px;
    border-radius: 50px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.963);
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
    margin: 5px auto; /* menos espaçamento abaixo */
    width: 200px;
    text-align: center;
    text-decoration: none;
}

.botoes:hover {
    background: linear-gradient(45deg, #d61111, #8d0707);
    box-shadow: 0 15px 20px rgba(250, 81, 3, 0.6);
    transform: translateY(-3px);
}
.btnform:hover {
    background: linear-gradient(45deg, #ffde23, #fc7425);
    box-shadow: 0 15px 20px rgba(250, 81, 3, 0.6);
    transform: translateY(-3px);
}
/* Notificações */

        /* ==========================================================================
   SISTEMA DE NOTIFICAÇÕES - IBRATEF (CSS ATUALIZADO)
   ========================================================================== */

.notif-dropdown-menu {
    min-width: 320px;
    max-width: 350px;
    max-height: 450px; /* Aumentei um pouquinho para acomodar o botão de marcar todas sem espremer */
    overflow-y: auto;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background-color: #700c0c; /* Segue o padrão do seu fundo */
}
.hover-white:hover {
    color: #ffffff !important;
    transition: color 0.2s ease;
}
.notif-container:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
/* Título e Bloco do Cabeçalho */
.notif-dropdown-menu .dropdown-header {
    color: #ffffff !important; 
    font-size: 1.1rem !important; 
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Linha divisória idêntica à dos itens */
}

/* Novo Botão "Marcar todas como lidas" - Integrado ao seu estilo */
.btn-notif-all {
    width: 100%;
    margin-top: 10px;
    font-size: 0.85rem !important;
    font-weight: bold;
    letter-spacing: 0.3px;
    color: #ffffff !important;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.btn-notif-all:hover {
    color: #700c0c !important; /* Inverte o texto para a cor do seu fundo */
    background-color: #ffffff !important; /* Fundo branco para dar alto contraste */
    border-color: #ffffff !important;
    cursor: pointer;
}

/* Lista e Itens */
.notif-item {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); 
    white-space: normal;
}

.notif-item:last-child {
    border-bottom: none;
}

/* Texto da mensagem da notificação */
.notif-item p {
    color: #ffffff !important; 
    font-size: 1rem !important; 
    line-height: 1.4;
    margin-bottom: 6px;
}

/* Botão individual "Marcar como lida" */
.notif-btn-lida {
    font-size: 0.9rem !important; 
    text-decoration: none;
    color: #ffffff !important; 
    font-weight: bold;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.notif-btn-lida:hover {
    text-decoration: underline !important;
    color: rgba(255, 255, 255, 0.8) !important; /* Corrigido de preto para opacidade branca para não sumir no fundo escuro */
}

/* Data da notificação */
.notif-item .text-muted {
    color: rgba(255, 255, 255, 0.7) !important; 
    font-size: 12px !important;
}

.notif-item-link {
    text-decoration: none !important;
    display: block;
    color: inherit;
}

.notif-item-link:hover .notif-item {
    background-color: rgba(255, 255, 255, 0.05); 
    cursor: pointer;
}

/* Customização sutil da barra de rolagem interna */
.notif-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}
.notif-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}
.notif-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
    

/* CARDS */
.card{
    border:none;
    transition:0.3s;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.card-img-top{
    height:220px;
    object-fit:cover;
    object-position: center 30%;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    border-top-left-radius:12px;
    border-top-right-radius:12px;

}
.card-text{
    min-height: 60px;
}
.card-body p{
    margin-bottom: 5px;
    min-height: 20px;
}
.card-body .botoes{
    margin-top: 15px;
}
.card-title{
    font-weight:600;
}
.card-item .card {
    width: 100%;
}

.card-item {
    min-width: 280px;
    max-width: 280px;
    flex: 0 0 auto;
}
/* VIDEOS DO YOUTUBE */
.video-logo {
    width: 100%;
    height: 300px; /* mantém o tamanho que já funciona */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    background: #000;
    transition: 0.3s;
}

.video-logo iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* efeito hover bonitão */
.video-logo:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 35px rgba(0,0,0,0.35);
}
.detalhes-box {
    font-size: 16px;
    line-height: 1.7;
}

.detalhes-box p {
    margin-bottom: 10px;
}

.video-box {
    width: 100%;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    background: #000;
}

.video-box iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-box:hover {
    transform: scale(1.02);
    transition: 0.3s;
}
.cke_notifications_area {
    display: none !important;
}
/*---------------------------*/

.img-servico{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    display:block;
    margin:20px auto;


}
.img_padrao,
.img-sistema{
    height:200px;
    object-fit:cover;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    object-position: center 30%;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);



}


/* IMAGENS 
.card-img-top{
    height:260px;
    object-fit:cover;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    object-position: center 30%;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);


}

*/

/* BOTÕES 
.botoes{
    background:#c40000;
    color:white;
    border-radius:30px;
    padding:10px 25px;
    font-weight:500;
    transition:0.3s;
}

.botoes:hover{
    background:#a00000;
    color:white;
}
    */
 .botoes{
    background:#8b1c1c;
    color:white;
    border:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 90;
    padding:10px 10px;
    border-radius:5px;
}

.botoes:hover{
    background:#6e1414;
    color:white;
}   
/* Agendamento */
.cta-agendamento{
    background:#f5f5f5;
    padding:60px;
    text-align:center;
}

/* TÍTULOS */
.section-title{
    font-weight:600;
    color:#5a5a5a;
}
/* HEADER MODERNO */

.site-header {
    background: linear-gradient(135deg, #5c0a0a, #2b0000);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* navbar */
.navbar {
    padding: 12px 20px;
}

/* logo */
.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.08);
}

/* links */
.navbar-nav .nav-link {
    color: white !important;
    font-weight: 500;
    margin-right: 12px;
    position: relative;
    transition: all 0.3s ease;
}

/* efeito hover */
.navbar-nav .nav-link:hover {
    color: #ffb3b3 !important;
}

/* linha animada embaixo */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: -4px;
    background-color: #ff4d4d;
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* dropdown 
.dropdown-menu {
    background-color: #2b0000;
    border: none;
    border-radius: 8px;
    padding: 10px;
}


.dropdown-item {
    
    color: white;
    border-radius: 6px;
    transition: 0.2s;
}

.dropdown-item:hover {
    background-color: #7a0d0d;
    color: white;
}
    */
    .dropdown-item {
    display: block;
    width: max-content; /* permite expandir para caber o maior item */
    min-width: 100%; /* ocupa no mínimo toda a largura do botão */
    width: 100%;
    padding: 6px 12px;
    clear: both;
    font-weight: 400;
    color: #a00202;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-menu {
    background-color: #8d0707;
    border: none;
    border-radius: 8px;
    padding: 10px;
}

.dropdown-menu .dropdown-item {
    color: white;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #c5260a;
}

.dropdown-menu .dropdown-item {
    padding: 6px 12px;
    line-height: 1.4;
    white-space: nowrap;
    background-color: transparent;
    transition: background-color 0.2s;
}

.dropdown-menu .dropdown-item:hover {
    background-color: transparent;
    width: max-content; /* permite expandir para caber o maior item */
    min-width: 100%; /* ocupa no mínimo toda a largura do botão */
    color: #000000;
}

/* botão mobile */
.navbar-toggler {
    border: none;
}

/* fundo do menu mobile */
.navbar-collapse {
    background-color: transparent;
}
/* MENU */


/* HOVER */
.dropdown-item:hover{
    background:#8a0d0d;
    color:#fff;
}

/* DIVISOR */
.dropdown-divider{
    height:1px;
    margin:6px 0;
    background:rgba(255,255,255,0.25);
    border:none;
}
.logopet {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  filter: drop-shadow(0 0 8px #960e01);
  cursor: default;

}
.logopet:hover {
  box-shadow: 0 12px 30px rgba(255, 111, 97, 0.7);
  filter: drop-shadow(0 0 12px #aa1a0d);
}
.logoibratef{
    width:100%;
    max-width:420px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: drop-shadow(0 0 8px #960e01);
    cursor: default;
}
.logoibratef:hover {
  box-shadow: 0 12px 15px rgba(226, 57, 42, 0.7);
  filter: drop-shadow(0 0 12px #aa1a0d);
}
.icones a{
display:inline-flex;
align-items:center;
justify-content:center;
width:45px;
height:45px;
border-radius:50%;
color:white;
text-decoration:none;
transition:0.3s;
}
@media (max-width: 768px) {

  .navbar-nav {
    text-align: center;
    width: 100%;
  }

  .navbar-nav .nav-item {
    margin: 10px 0;
  }

  .navbar-nav .nav-link {
    font-size: 1.2rem;
  }

}

/* Facebook */
.icones a:nth-child(1){
background:#990418;
}

/* Instagram */
.icones a:nth-child(2){
background:#990418;
}

/* Twitter */
.icones a:nth-child(3){
background:#990418;
}

/* Linkedin */
.icones a:nth-child(4){
background:#990418;
}

/* Hover */
.icones a:hover{
transform:scale(1.1);
opacity:0.9;
}



.form-contato{
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
.img-banner {

    max-width:100%;
    height:auto;
    max-height: 450px; 
    object-fit: cover;
    border-radius: 10px;
    object-position: center 20%;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
/* teste */
.banner-principal{
    background-image:url("/assets/img/ibratefbanner.jpg");
    background-size:cover;
    background-position:center;
    height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.banner-texto{
    text-align:center;
    color:white;
    background:rgba(0,0,0,0.4);
    padding:30px;
    border-radius:10px;
}
/* fim do teste */


.login-box {
  padding: 30px 40px;
  border: 3px solid #FF6F61; /* borda coral */
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(255, 111, 97, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-box:hover {
  border-color: #971910;
  box-shadow: 0 12px 40px rgba(255, 75, 62, 0.5);
}

/* rodapé */
.footer-ibratef{
    background: linear-gradient(135deg, #7b1e1e, #5a1414);
    color: white;
    padding: 50px 20px 25px;
    width: 100%;
    overflow: hidden;
}

/* títulos */
.footer-ibratef h5{
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* textos */
.footer-ibratef p{
    line-height: 1.6;
    opacity: 0.9;
}

/* links */
.footer-ibratef a{
    color: #ffd6d6;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-ibratef a:hover{
    color: #ffffff;
    text-decoration: underline;
}

/* espaçamento colunas */
.footer-ibratef .row > div{
    padding: 10px 25px;
}

/* copy */
.footer-copy{
    background: #5a1414;
    padding: 12px;
    font-size: 13px;
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

/* ✨ animação */
.footer-item{
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
}

/* delay em cascata */
.footer-item:nth-child(1){ animation-delay: 0.2s; }
.footer-item:nth-child(2){ animation-delay: 0.4s; }
.footer-item:nth-child(3){ animation-delay: 0.6s; }
.footer-item:nth-child(4){ animation-delay: 0.8s; }
.footer-item:nth-child(5){ animation-delay: 1s; }

/* keyframe */
@keyframes fadeUp{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* responsivo */
@media (max-width: 768px){
    .footer-ibratef{
        text-align: center;
    }
}


/* Título estilizado */
h1 {
    font-size: 48px;
    color: #ff5100;
    font-weight: bold;
    text-shadow: 2px 2px #fff3cd;
}

/* Subtítulo Ibratef */
h4 {
    font-size: 36px;
    color: #d35400;
    font-weight: bold;
    margin-top: 20px;
}

/* Slogan */
.inicio {
    font-size: 24px;
    font-style: italic;
    color: #ff6f00;
}

/* Estilização dos ícones sociais */
.social_icon a {
    color: #fff;
    background-color: #ff8800;
    padding: 10px 12px;
    margin: 0 6px;
    border-radius: 50%;
    font-size: 20px;
    transition: transform 0.2s, background-color 0.2s;
}

.social_icon a:hover {
    background-color: #ffcaad;
    transform: scale(1.2);
}

/* Texto dos parágrafos */
article p {
    font-size: 18px;
    line-height: 1.6;
    text-align: justify;
    color: #444;
}

/* Responsividade da imagem */
article img {
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Container da seção "sobre" */
.sobre-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}


/* Rodapé */
.footer {
    background: linear-gradient(135deg, #f4b41a, #d98f05, #aa6e03);
    color: #fff;
    padding: 5px 10px;
    box-shadow: 0 -5px 15px rgba(170, 110, 3, 0.4);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer a {
    color: #fff8dc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #ffef82;
}
.img_padrao {
    width: 100%;
    height: 400px;        /* Escolha a altura padrão para todas */
    object-fit: cover;    /* Faz a imagem cortar e preencher sem distorcer */
    border-radius: 10px;  /* Opcional: bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Opcional: sombra leve */
}
/* Gradiente bonito para o lado direito do formulário */
.gradient-custom-2 {
    background: #fccb90; /* fallback para navegadores antigos */

    /* Gradiente para navegadores WebKit */
    background: -webkit-linear-gradient(to right, #ee7724, #f8d408);

    /* Gradiente padrão moderno */
    background: linear-gradient(to right, #ee7724, #f8d408);
}

/* Faz o formulário ocupar 100% da altura da tela em telas médias para cima */
@media (min-width: 768px) {
    .gradient-form {
        height: 100vh !important;
    }
}

/* Adiciona bordas arredondadas no lado colorido do formulário */
@media (min-width: 769px) {
    .gradient-custom-2 {
        border-top-right-radius: .3rem;
        border-bottom-right-radius: .3rem;
    }
}
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}
.h-custom {
height: calc(100% - 73px);
}
@media (max-width: 450px) {
.h-custom {
height: 100%;
}
}
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}
.h-custom {
height: calc(100% - 73px);
}
@media (max-width: 450px) {
.h-custom {
height: 100%;
}
}
/* remove a seta do dropdown */
.dropdown-toggle::after {
    display: none !important;
}
.usuario-menu{
    background: rgba(255,255,255,0.12);
    padding: 6px 14px !important;
    border-radius: 20px;
    font-weight: 600;
    margin-left: 10px;
    transition: 0.3s;
}

.usuario-menu:hover{
    background: rgba(255,255,255,0.25);
}

.usuario-menu i{
    margin-right: 6px;
}

.btn-primary{
background:#7a0f1f;
border:none;
}

.btn-primary:hover{
background:#4e0914;
}

.text-primary{
color:#7a0f1f !important;
}

.bg-primary{
background:#7a0f1f !important;
}
.form-control{
padding:12px;
border-radius:8px;
}

.card{
border-radius:12px;
}

.btn-dark{
padding:12px;
font-weight:600;
}
/* ==========================================================================
   AJUSTES DE RESPONSIVIDADE (MOBILE) - CORREÇÃO DE ESTOURO
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Trava geral para impedir a rolagem lateral indesejada */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* 2. Corrige a logo da IBRATEF que estava vazando em telas pequenas */
    .logoibratef {
        max-width: 100% !important; /* impede que ela passe do tamanho do celular */
        height: auto;
    }

    /* 3. Ajusta o cabeçalho para conter os elementos dentro da tela */
    .site-header {
        padding: 10px 15px;
        box-sizing: border-box; /* garante que o padding não aumente o tamanho da barra */
    }

    /* 4. Força o container do Bootstrap (ou o seu) a respeitar os limites */
    .container, .navbar {
        max-width: 100% !important;
        overflow: hidden;
    }
    /* 1. Força o ícone de três barrinhas do Bootstrap a ficar branco */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* 2. Remove aquela borda preta estranha do botão */
    .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Deixa uma borda branquinha sutil */
        outline: none !important;
        box-shadow: none !important; /* Tira o efeito de clique azul do Bootstrap */
    }
    
}