@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/lemonmilk');

*{
    font-family: 'Fira Sans';
}
header{
    position: fixed;
    width: 100%;
}
nav{
    display: flex;
    justify-content: space-between;
}
nav a{
    font-family: 'Lemon/Milk';
    color:#ffffff;
    text-decoration: none;
    font-size: 0.9rem; 
}
nav a:hover{
    color:#ffffff;
}
nav a.active::after,
nav a:hover::after{
    background-color: rgb(249, 236, 0);
    width: 26px;
    height: 6px;
    content: "";
    display: block;
    margin: auto;
    border-radius: 10px;
    margin-top: 2px;
}

h2{
    font-size:6vw;
    font-weight: 900;
    line-height: 6vw; 
}
h2 b{
    font-weight: 800;
}
h2 .text-yellow{
    color: rgb(249, 236, 0);
}
.banner-inicio{
    height: 100vh;
    background-image: url(../images/banner-inicio.jpg);
    background-size: cover;
    background-position:center top;
}
.banner-inicio h2{     
    color: rgb(249, 236, 0);
    text-transform: uppercase;    
}
.banner-inicio p{   
    color: #ffffff;
    font-size: 1.5vw;
}
.banner-inicio p b{
    font-weight: 900;
}

/* AREA INTRO */
.intro{
    background-image: url(../images/abears.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #f1f1f3;
    min-height: 100vh;
    height: auto;
}
.intro h2{
    color:#ffffff
}
.intro p{
    color: #ffffff;
    font-size: 1.2vw;
    font-weight: 300;
}
.intro p b{
    font-weight: 700;
}
.oq-fazemos{
    background-image: url(../images/bg-fazemos.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    height: auto;
}
.oq-fazemos .nav-tabs{
    width: 100%;
    justify-content: space-between;
    border-bottom: none;
}
.oq-fazemos .nav-tabs button{   
    border-width: 2px;
    border-color: rgb(38, 37, 39);
    border-style: solid;    
    color:#262527;
    font-size: 1vw;  
    border-radius: 50px;
    width: 15%;
}
.oq-fazemos .nav-tabs button.active,
.oq-fazemos .nav-tabs button:hover{
    background:none;
    color:#e21d5e;
    border-color: #e21d5e;
    font-weight: 700;
}
.panel-services{
    border-radius: 80px;
    background-color: rgba(226, 29, 94, 0.749);
    box-shadow: -13.151px 26.964px 54.87px 4.13px rgba(43, 51, 58, 0.3);       
  }
.panel-services h2{
    font-size: 1.8vw;
    color: #ffffff;
    font-weight: 300;
    background-color: #e21d5e;
    text-align: center;
    width: 60%;
    border-radius: 40px;
    margin: 0;
}
.panel-services button{
    border: 0;
}
.panel-services .icon-title figure{
    background-color: #e21d5e;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    margin: 0;
    padding-top: 8px;
    text-align: center;
    margin: auto;
}
.panel-services .icon-title figure img{
    max-width: 70%;
}
.panel-services p,
.panel-services ul li{
    color: #ffffff;
    font-size: 1.2vw;
    font-weight: 300;
}
.panel-services p b,
.panel-services ul li b{
    font-weight: 700;
}
.panel-services ul{
    list-style: none;
    position: relative;
}
.panel-services ul li:before{
    background-color: rgb(249, 236, 0);
    width: 20px;
    height: 5px;
    position: absolute;
    left: 0;
    content: "";
    margin-top: 12px;
}
.clientes{
    background-image: url(../images/bg-clientes.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    height: auto;
}
.clientes ul{
    list-style: none;
    padding: 0;
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center; */
}
.clientes ul li{
    display: flex;
    align-items: center;
    float: left;
    margin: 10px 17px;
    min-height: 83px;    
    width: 14%;
    text-align: center;
}
.clientes ul li img{
    margin: auto;
    max-width: 100%;
}
.clientes h2{
    color: rgb(249, 236, 0);
}
.clientes p{
    color: #ffffff;
    font-size: 1.5vw;
    font-weight: 300;
}
.clientes p b{
    font-weight: 700;
}
.clientes .image-clientes{
    max-width: 100%;
}
.contato{
    background-image: url(../images/bg-contato.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    height: auto;
}
.contato h2{
    color: #ffffff;
}
.contato h4{
    color: #262527;
    font-size: 1.5vw;
    font-weight: 600;
}
.contato p,
.contato p a{
    color: #ffffff;
    font-size: 1.5vw !important;
    font-weight: 400;
    text-decoration: none;
}
.contato .contatos {
    border-width: 2px;
    border-color: rgb(226, 29, 94);
    border-style: solid;
    width: auto;
    float: left;
    padding: 10px 60px;
    border-radius: 65px;  
  }
  
.contato .contatos p{    
    font-size: 1.5vw;   
    margin: 10px 0; 
}
.footer{
    background-color: #262527;
}
.footer h4{
    color: #f9ec00;
    font-size: 1.5vw;
    font-weight: 600;
}
.footer p{
    color: #ffffff;
    font-size: 1.2vw;
    font-weight: 300;
}
.footer span{
    color: #ffffff;
    font-size: 1vw;
    font-weight: 300;
}
.footer a{
    text-decoration: none;
    color: #f9ec00;
    font-size: 1.2vw;
    font-weight: 300;
}

.copy{
    color: #ffffff;
    font-size: 0.8vw;
    font-weight: 800;
    position: fixed;
    bottom: 10px;
    right: 10px;
}

@media ( max-width: 750px ){

    h2{
        font-size: 2.3rem;
        font-weight: 900;
        line-height: 2.5rem;
    }
    nav a{
        font-size: 1.5rem;
        width: 100%;
        display: block;
    }
    nav a:after{
        margin-top: -5px !important;
        position: absolute;
    }
    .logo{
        width: 35%;
    }
    .banner-inicio{
        height: 310px;
        background-position: 0px 0;
    }
    .banner-inicio p,
    .intro p,
    .clientes p{
        color: #ffffff;
        font-size: 2.8vw;
    }
    .clientes ul li{
        margin:0;
        width: 33%;
    }
    .clientes ul li img{
        max-width: 85% !important;
    }
    .intro{
        min-height: 430px;
        background-position: -230px 0;
    }
    .oq-fazemos .nav-tabs{
        display: initial;
        column-count: 3;
    }
    .oq-fazemos .nav-tabs button{
        width: 100%;
        font-size: 0.8rem;
        padding: 10px;
        min-height: 62px;
        margin-bottom: 10px;
    }
    .panel-services .icon-title figure img{
        max-width: 70% !important;
    }
    .panel-services .icon-title figure{
        width: 65px;
        height: 65px;
    }
    .panel-services h2{
        width: 100%;
        font-size:1.5rem;
    }
    .panel-services p, .panel-services ul li{
        font-size: 1rem;
    }
    .clientes{
        min-height: 440px;
    }
    .contato{
        min-height: 375px;
        background-position: -90px 0px;
    }
    .contato h4{
        font-size: 1.2rem;
    }
    .contato p, .contato p a{
        font-size: 1rem !important;
    }
    .contato .contatos{
        padding: 0px 32px;
    }
    .footer h4{
        font-size: 1.2rem;
    }
    .footer p,
    .footer span{
        font-size: 1rem !important;
    }
    .footer a{
        font-size: 1rem !important;
    }
    .copy{
        font-size: 0.8rem;
        position:relative;
    }

    #navTop{background:url(../images/bg-menu-mobile.jpg);position: fixed;z-index: 9999;padding-left: 25px;
		right: -100%;top: 0px;padding-bottom:0px;width:100%;transition: 1.5s;display:block;height: 100%;}
	#navTop.aberto{right:0;}

	#navTop	ul{width: 100%;}
	#navTop ul li{float: none;border-bottom:1px solid #ffffff33;    margin-bottom: 5px;		padding-bottom: 5px;	}
	#navTop ul li:last-child{border-bottom:none;}
	#navTop ul li a{color: #ffffff; font-family:Kufam;font-size: 16px;  font-weight: 500;text-transform: uppercase;display: table;position: relative;line-height: 25px;}
	#navTop ul li a:before{content: ""; width: 0; height: 3px; position: absolute; left: 0; bottom: 0; transition: 0.5s; background: #ffffff;}
	#navTop ul li a:hover:before{width:100%;}
	
    .toogle-menu-close i{
        color: #ffffff;       
        font-size: 25px;
        font-weight: 600;
        font-size:40px;
        cursor: pointer;
    }

	.toogle-menu i{
        color: rgb(249, 236, 0);       
        font-size: 25px;
        font-weight: 600;
        line-height: 22px;
        cursor: pointer;
        position: fixed;
        right: 10px;
        top: 30px;
    }
	.toogle-menu i{font-size: 55px;}

}