*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
}

:root {
  --primColor: #F37D30;
  --secoColor: #fff;
  --cornerRad: 6px;
}

.container-fluid {
    padding: 0 !important;
}


.container{
    max-width: 1280px;
    margin: auto;
    
}

body {
    
}

.tela-carregamento {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.tela-carregamento img {
    width: 480px;
    height: auto;
}



.mostrar-conteudo .conteudo {
    display: block;
}

.mostrar-conteudo .tela-carregamento {
    display: none;
    overflow: auto; /* Adicione esta linha para permitir rolagem quando o conteúdo é exibido */
}

.flex{
    display: flex;
    align-items: center;
    justify-content:center;
}

header{
    width: 100%;
    padding:10px 4%;
    position:fixed;
    top: 0;
    left: 0; /*AQUI PARA TRAZER A LOGO MAIS PRA ESQUERDA*/
    transition: .5s;
    z-index: 2;
}

header.rolagem{
    background-color: #fff;
    padding: 20px 4%;
    
    
}

header.rolagem a{
    color: #F37D30;
    
}


header.rolagem a, header.rolagem i{
    color: #F37D30;
}

.logoPreta {
    display: none;
}

header.rolagem .logoBranca{
    display: none;
}

header.rolagem .logoPreta{
    display: block;
}

@media screen and (max-width: 1120px) {
    .flex {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        order: 3;
    }

    nav ul {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 10px;
    }

    nav li {
        margin: 5px 0;
    }
    
    .logoBranca{
        width: 70px;
    }
    
    .logoPreta{
        width: 70px;
    }
}

header i{
    font-size: 30px;
    color: #fff;
}

header ul{
    list-style-type: none;
}

header ul li{
    display: inline-block;
    margin: 0 15px;
}

header ul li a{
    color: #fff;
    text-decoration: none;
}



.customNavPedir-btn{
    width: 160px;
    height: 40px;
    border: 0;
    border-color: #F37D30;
    background-color: #fff;
    color: #F37D30;
    cursor: pointer;
    transition: .5s;
    border-radius: 28px;
    transition: background-color 0.3s ease;
}

.customNavCliente-btn{
    width: 160px;
    height: 40px;
    border: 0;
    border-color: #fff;
    background-color: #F37D30;
    color: #fff;
    cursor: pointer;
    transition: .5s;
    border-radius: 28px;
    transition: background-color 0.3s ease;
}

.customNavCliente-btn:hover {
    background-color: #FFDD6C;
    color: #fff;/* Cor alterada quando o mouse está sobre o botão */
}

.customNavCliente-btn:active {
    background-color: #F37D30; /* Cor alterada quando o botão está sendo clicado */
}  

.customNavPedir-btn:hover {
    background-color: #46C2D2;
    color: #fff;/* Cor alterada quando o mouse está sobre o botão */
}

.customNavPedir-btn:active {
    background-color: #F37D30; /* Cor alterada quando o botão está sendo clicado */
}     


.rolagem .customNavPedir-btn{
    background-color: #F37D30;
    color: #fff;
}

.rolagem .customNavCliente-btn{
    background-color:transparent;
    color: #F37D30;
    border-color: #F37D30;
}

.rolagem .customNavCliente-btn:hover {
    background-color: #FFDD6C;
    color: #fff;/* Cor alterada quando o mouse está sobre o botão */
}

.rolagem .customNavCliente-btn:active {
    background-color: #F37D30; /* Cor alterada quando o botão está sendo clicado */
}  

.rolagem .customNavPedir-btn:hover {
    background-color: #46C2D2;
    color: #fff;/* Cor alterada quando o mouse está sobre o botão */
}

.rolagem .customNavPedir-btn:active {
    background-color: #F37D30; /* Cor alterada quando o botão está sendo clicado */
}   

.banner{
    
}

.banner .modeloBanner{
    width: auto;
    height: 500px;
    order: 1;
    margin-top: 50px;
    
}

.banner{
    font-size: 1em;
    
}

.banner h1{
    order: 2;
    text-align: center;
}

/* Estilos para dispositivos desktop com uma largura mínima de 768 pixels */
@media (min-width: 768px) {
    .imagem-desktop {
        display: block; /* Exibir a imagem para desktop */
    }

    .imagem-mobile {
        display: none; /* Ocultar a imagem para mobile */
    }
}

/* Estilos para dispositivos móveis com uma largura máxima de 767 pixels */
@media (max-width: 767px) {
    .imagem-desktop {
        display: none; /* Ocultar a imagem para desktop */
    }

    .imagem-mobile {
        display: block; /* Exibir a imagem para mobile */
    }
}




/*
@media screen and (max-width: 1120px) {
    #header ul li {
        display: none;
    }

}
*/

@media (max-width: 768px) {
    #img-custom{
        height: 180px;
        margin-left: 70px;
}
}

@media screen and (max-width: 1120px) {
    #header ul li .sobreNos {
        display: none;
    }

}

@media screen and (max-width: 1120px) {
    #header ul li .vantagens{
        display: none;
    }

}

@media screen and (max-width: 1120px) {
    #header ul li .boleto{
        display: none;
    }

}

@media screen and (max-width: 1120px) {
    #header ul li .acordo{
        display: none;
    }

}

@media screen and (max-width: 1120px) {
    #header ul li .btn-portalCliente{
        display: none;
        
    }

}

@media screen and (max-width: 1120px) {
    #header ul li .btn-pedirCartao{
        display: none;
        
    }

}


.customNavPedirMobile-btn{
    width: 130px;
    height: 40px;
    border: 0;
    border-color: #fff;
    background-color: #F37D30;
    color: #fff;
    cursor: pointer;
    transition: .5s;
    border-radius: 28px;
    transition: background-color 0.3s ease;
}



.customNavPedirMobile-btn:hover {
    background-color: #46C2D2;
    color: #fff;/* Cor alterada quando o mouse está sobre o botão */
}

.customNavPedirMobile-btn:active {
    background-color: #F37D30; /* Cor alterada quando o botão está sendo clicado */
}     


@media screen and (max-width: 1120px) {
    #menuMobile .customNavPedirMobile-btn{
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
        
    }

}


.customNavPedirMobile-btn {
  
  
  
  
  
  
  box-shadow: 0 0 0 0 #F37D30;
  
  
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  
  
  transition: all 300ms ease-in-out;
}


/* Comment-out to have the button continue to pulse on mouseover */




/* Animation */

@-webkit-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}


.customNavPedir-btn {
  
  
  
  
  
  
  box-shadow: 0 0 0 0 #fff;
  
  
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  
  
  transition: all 300ms ease-in-out;
}


/* Comment-out to have the button continue to pulse on mouseover */




/* Animation */

@-webkit-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}



.rolagem .customNavPedir-btn {
  
  
  
  
  
  
  box-shadow: 0 0 0 0 #F37D30;
  
  
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  
  
  transition: all 300ms ease-in-out;
}


/* Comment-out to have the button continue to pulse on mouseover */




/* Animation */

@-webkit-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}


































/*menu Hamburguer*/

@media screen and (min-width: 1120px) {
    #menuMobile {
        display: none;
    }

}

@media screen and (min-width: 1120px) {
    #botaoMenuMobile {
        display: none;
    }

}

#botaoMenuMobile{
    position: fixed;
    top: 0;
    right: 110px;
    top: 30px;
    
}

.wrapper{
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  width: 100%;
  background: #fff;
  transition: all 0.6s ease-in-out;
  z-index: 1001;
}
#active:checked ~ .wrapper{
  right:0;
}
.menu-btn{
  position: absolute;
  z-index: 1002;
  right: 20px;
  top: 19px;
  height: 45px;
  width: 65px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: fixed;
  background-color: var(--primColor);
  border: 2px solid var(--secoColor);
  border-radius: var(--cornerRad);
  color: var(--secoColor);
  
    
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after{
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid #fff;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before{
  transform: translateY(-8px);
}
.menu-btn:after{
  transform: translateY(8px);
}


.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}

/* closing animation */
#active:checked + .menu-btn span {
	transform: scaleX(0);
}
#active:checked + .menu-btn:before {
	transform: rotate(45deg);
  border-color: #fff;
}
#active:checked + .menu-btn:after {
	transform: rotate(-45deg);
  border-color: #fff;
}
.wrapper ul{
  position: absolute;
  top: 60%;
  left: 50%;
  height: 90%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;

}

.wrapper ul li{
  height: 10%;
  margin: 15px 0;
  font-size: 20px;
    
}

.wrapper ul li a{
  text-decoration: none;
  color: #F37D30;
  border-radius: 50px;
  opacity: 0;
  
}

.wrapper ul li a:hover{
  color: #46C2D2;
}

.wrapper ul li a:hover:after{
  transform: scaleY(1);
}




/*

.wrapper ul li a{
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 30px;
  color: #F37D30;
  border-radius: 50px;
  position: absolute;
  line-height: 30px;
  margin: 5px 30px;
  opacity: 0;
  transition: all 0.3s ease;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after{
  position: absolute;
  content: "";
  background: #F37D30;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
  transform: scaleY(1);
}
.wrapper ul li a:hover{
  color: #fff;
}

*/



input[type="checkbox"]{
  display: none;
}

#active:checked ~ .wrapper ul li a{
  opacity: 1;
}
.wrapper ul li a{
  transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateX(100px);
}
#active:checked ~ .wrapper ul li a{
	transform: none;
	transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1);
   transition-delay: .6s;
  transform: translateX(-100px);
}


p{
    text-align: justify;
    margin: 15px;
    margin-right: 5px;
    margin-left: 5px;
}

#box{
	width: 480px;
	height: 80px;
	border-radius: 20px;
    border:1px solid #F37D30;
    margin: 20px;
    margin-top: 10px;
    margin-left: 0px;
	}

#icon-box{
	width: 100px;
    margin: 10px;
    margin-top: -25px;
    margin-left: -20px;
	}

.acordo-1{
    width:450px;
    height: 580px;
    margin: 10px;
    margin-bottom: 40px;
    margin-left: 100px;
    
}

#box-1{
	width: 1000px;
	height: 220px;
	border-radius: 20px;
    border:1px solid #FFDD6C;
    background-color: #FFDD6C;
    margin: 30px;
    margin-top: 0px;
    margin-bottom: 50px;
    margin-left: 125px;
    margin-right: 125px;
    padding: 25px 10px 15px 10px;
}

#box-10{
	border-radius: 20px;
    border:1px solid #FFDD6C;
    background-color: #FFDD6C;
    margin: 30px;
    margin-top: 0px;
    margin-bottom: 50px;
    margin-left: 125px;
    margin-right: 125px;
    padding: 25px 10px 15px 10px;
}
    
/* Ínicio página de acordo */
#form-1{
    width:1000px;
    height: 612px;
    border-radius: 20px;
    border:1px solid #D7D7D7;
    
}

.form-1{
    width: 400px;
    height: 600px;
    margin: 10px;
    margin-bottom: 40px;
    margin-left: 60px;
    
}
#box-3{
	width: 460px;
	height: 80px;
	border-radius: 20px;
    border: 1px solid white;
    margin: 10px;
    margin-top: 15px;
    margin-left: -15px;
    margin-right: 20px;
    margin-bottom: 10px;
    text-align: justify;
    align-items: flex-start;
	}

#icon-box-1{
	width: 40px;
    margin-right: 0px;
    align-items: flex-start;
	}

@media (min-width: 768px) {
            /* Apply styles only for screens smaller than 768px (mobile) */

            #form-2 {
                display:none;
            }    
        }

@media (max-width: 768px) {
            /* Apply styles only for screens smaller than 768px (mobile) */

            #form-1 {
                display:none;
            }    
        }


@media screen and (max-width: 1120px) {
    .acordo-1 {
        display: none;
    }

}

@media screen and (max-width: 1120px) {
    #form-acordo {
        display: none;
    }

}

.form-acordo-mobile-img{
    width: 90%;
}
@media screen and (min-width: 1120px) {
    #form-acordo-mobile {
        display: none;
    }

}
/* Fim página de acordo */


/*Ínicio - MISSÃO, VISÃO E VALORES*/     

#box-2{
	max-width: 100%;
	border-radius: 20px;
    border:1px solid white;
    background-color:;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 50px;
    padding: 25px 10px 15px 10px;
    text-align: justify;
}

.square {
            width: 220px;
            height: auto;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 20px;
            margin: 10px;
            transition: background-color 0.3s, color 0.3s;
        }

        .square:hover {
            background-color: #f37d30;
            color: white;
        }

.quadrados{
    display: flex;      
}


/*Fim - MISSÃO, VISÃO E VALORES*/  


/* inicio linha do tempo*//* inicio linha do tempo*//* inicio linha do tempo*/


.container-1{
    max-width: 1050px;
    margin: auto;
    
}
.main-timeline{
    overflow: hidden;
    position: relative;
}
.main-timeline .timeline{
    position: relative;
    margin-top: -93px;
}

.main-timeline .timeline:first-child{ margin-top: 0; }
.main-timeline .timeline:before,
.main-timeline .timeline:after{
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
.main-timeline .timeline:before{
    content: "";
    width: 100%;
    height: 100%;
    box-shadow: -8px 0 5px -5px rgba(0, 0, 0, 0) inset;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
.main-timeline .timeline-icon{
                            width: 210px;
                            height: 210px;
                            border-radius: 50%;
                            border: 25px solid transparent;
                            border-top-color: #F37D30;
                            border-right-color: #F37D30;
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                            margin: auto;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            z-index: 1;
                            transform: rotate(45deg);
 }
 .main-timeline .year{
                            display: block;
                            width: 110px;
                            height: 110px;
                            line-height: 110px;
                            border-radius: 50%;
                            background: #fff;
                            box-shadow: 0 0 20px rgba(0,0,0,0.4);
                            margin: auto;
                            font-size: 30px;
                            font-weight: bold;
                            color: black;
                            text-align: center;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            transform: rotate(-45deg);
}
.main-timeline .timeline-content{
                            width: 35%;
                            float: right;
                            background: #F37D30;
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                            padding: 30px 20px;
                            margin: 50px 0;
                            z-index: -1000;
                            position: relative;
}
.main-timeline .timeline-content:before{
                            content: "";
                            width: 20%;
                            height: 15px;
                            background: #F37D30;
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                            position: absolute;
                            top: 50%;
                            left: -20%;
                            z-index: -100;
                            transform: translateY(-50%);
 }
.main-timeline .title{
                            font-size: 20px;
                            font-weight: bold;
                            color: white;
                            margin: 0 0 10px 0;
}
.main-timeline .description{
                            font-size: 16px;
                            color: white;
                            line-height: 24px;
                            margin: 0;
}
                      
.main-timeline .timeline:nth-child(2n):before{ box-shadow: 8px 0 5px -5px rgba(0, 0, 0, 0) inset; }
.main-timeline .timeline:nth-child(2n) .timeline-icon{ transform: rotate(-135deg); }
.main-timeline .timeline:nth-child(2n) .year{ transform: rotate(135deg); }
.main-timeline .timeline:nth-child(2n) .timeline-content{ float: left; }
.main-timeline .timeline:nth-child(2n) .timeline-content:before{
    left: auto;
    right: -20%;
}
.main-timeline .timeline:nth-child(2n) .timeline-icon{
                            border-top-color: #F37D30;
                            border-right-color: #F37D30;
}
.main-timeline .timeline:nth-child(2n) .year{ color: #000; }
.main-timeline .timeline:nth-child(2n) .timeline-content,
.main-timeline .timeline:nth-child(2n) .timeline-content:before{ background: #F37D30; }
.main-timeline .timeline:nth-child(3n) .timeline-icon{
                            border-top-color: #F37D30;
                            border-right-color: #F37D30;
}
.main-timeline .timeline:nth-child(3n) .year{ color: #000; }
.main-timeline .timeline:nth-child(3n) .timeline-content,
.main-timeline .timeline:nth-child(3n) .timeline-content:before{ background: #F37D30; }
.main-timeline .timeline:nth-child(4n) .timeline-icon{
                            border-top-color: #F37D30;
                            border-right-color: #F37D30;
}
.main-timeline .timeline:nth-child(4n) .year{ color: #000; }
.main-timeline .timeline:nth-child(4n) .timeline-content,
.main-timeline .timeline:nth-child(4n) .timeline-content:before{ background: #F37D30; }

@media only screen and (max-width: 1199px){
                            .main-timeline .timeline{ margin-top: -103px; }
                            .main-timeline .timeline-content:before{ left: -18%; }
                            .main-timeline .timeline:nth-child(2n) .timeline-content:before{ right: -18%; }
}
 @media only screen and (max-width: 990px){
.main-timeline .timeline{ margin-top: -127px; }
.main-timeline .timeline-content:before{ left: -2%; }
.main-timeline .timeline:nth-child(2n) .timeline-content:before{ right: -2%; }
}
@media only screen and (max-width: 767px){
.main-timeline .timeline{
                                margin-top: 0;
                                overflow: hidden;
}
.main-timeline .timeline:before,
.main-timeline .timeline:nth-child(2n):before{
                                box-shadow: none;
}
.main-timeline .timeline-icon,
.main-timeline .timeline:nth-child(2n) .timeline-icon{
                                margin-top: -30px;
                                margin-bottom: 20px;
                                position: relative;
                                transform: rotate(135deg);
}
.main-timeline .year,
.main-timeline .timeline:nth-child(2n) .year{ transform: rotate(-135deg); }
.main-timeline .timeline-content,
.main-timeline .timeline:nth-child(2n) .timeline-content{
                                width: 95%;
                                float: none;
                                border-radius: 0 0 20px 20px;
                                text-align: center;
                                padding: 25px 20px;
                                margin: 0 auto;
                                z-index: -1000;
}
.main-timeline .timeline-content:before,
.main-timeline .timeline:nth-child(2n) .timeline-content:before{
                                width: 15px;
                                height: 25px;
                                position: absolute;
                                top: -22px;
                                left: 50%;
                                z-index: -1000;
                                transform: translate(-50%,0);
}

/*mobile*/
@media (max-width: 768px) {
    .rodape-div-1, .rodape-div-2, .rodape-div-3, .rodape-div-4{
        width: calc(50% - 20px);
        padding: 10px;
    }
}

/*fim linha do tempo*//*fim linha do tempo*//*fim linha do tempo*/
    
  
    
    
    
    
    













/*FOOTER*/