.banner{
    display: block;
}
.bannerMobile{
    display: none;
}
.banner{
    background:url('/arquivos/banner/1.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto !important;
    width: 100%;
    color: #ffffff;
    margin-bottom: 0;
}
.banner-form{
    background-color: #ffffff;
    color: #000000;
    margin-bottom: 15%;

}
.banner-title {
    font-size: 60px;
    font-weight: bold;
    text-align: left;
    padding: 20px;
    color: #f6f6f6;
   /* Cor base do texto */
    transition: all 0.3s ease;
   /* Transi��o suave para todos os efeitos */
}
.banner-title:hover {
    color: #fff;
   /* Cor clara no hover */
    transform: translateY(-3px);
   /* Efeito de eleva��o suave */
    text-shadow: 0 2px 5px rgb(255, 255, 255);
   /* Efeito de brilho sutil */
}
.banner-text{
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding: 20px;
}


.banner-franqueado{
    background:url('/arquivos/banner/3.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
    width: 100%;
    color: #ffffff;
    margin-bottom: 0;
}
.banner-suporte{
    background:url('/arquivos/banner/3.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
    width: 100%;
    color: #ffffff;
    margin-bottom: 0;
}
.top-bar {
    background-color: #1a1a1a;
    color: white;
    font-size: 14px;
    padding: 8px 0;
}
.pipe {
    color: white;
    font-weight: bold;
}

.btn-saiba-mais {
    background: linear-gradient(135deg, #00345e, #034c88);
    box-shadow: 0 8px 20px rgba(1, 7, 92, 0.5);
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;

    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(10px);
}

.btn-saiba-mais:hover {
    background: linear-gradient(135deg, #00345e, #034c88);
    box-shadow: 0 8px 20px rgba(1, 7, 92, 0.5);
    transform: scale(1.05);
}

.btn-saiba-mais:active {
    transform: scale(0.98);
    box-shadow: 0 3px 10px rgba(255, 75, 92, 0.2);
}

.btn-saiba-mais::before {
content: "\f135"; /* Ícone de foguete do FontAwesome */
font-family: "Font Awesome 5 Free";
font-weight: 900;
}

.btn-saiba-mais::after {
content: " Saiba mais";
font-weight: bold;
}

/* estilos específicos do banner2 foram movidos para o próprio componente */

.main-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}