/* ----------------------------------------------------------
    :: Template Name: Fortal
    :: Author: Marcasite - Carlos Augusto
    :: Version: 1.0.0
    :: Created: 024 de Outubro de 2023
    ----------------------------------------------------------

/***************************************************************************
       Cores
****************************************************************************

	Branco			= #ffffff
	Laranja			= #eb902f
	Azul				= #173d6f
	Cinza				= #6e6e6e	

/***************************************************************************
       Fonts
***************************************************************************/
	
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@300;400;700;800&display=swap');

/***************************************************************************
       Variáveis
***************************************************************************/

	:root {
		--cor-branco:			#ffffff;
		--cor-laranja:		#eb902f;
		--cor-azul:				#173d6f;
		--cor-cinza:			#6e6e6e;


		--font-montserrat: 	'Montserrat', sans-serif;
		--font-open: 				'Open Sans', sans-serif;

		--font-light: 				300;
		--font-regular:				400;
		--font-bold:					700;
		--font-extrabold:			800;
	}

/***************************************************************************
        All
***************************************************************************/
	html{
		margin-top: 0px!important;
	}
	html,
	body{
		background: #6d6d6d;
		margin: 0;
		overflow-x: clip;
	}

	*{
		margin: 0;
		box-shadow: 0 0 0 0;
		border: 0 none;
		outline: 0;
		font-family: var(--font-bricolage);
	}

	a{
		text-decoration: none !important;
		cursor: pointer;
	}

	button:focus { outline: none; }

	.mobile{ display: none; }

	.transition_on *,
	.transition_on{ transition: ease .5s all !important; }

	.transition_off *,
	.transition_off{ transition: none!important; }

	.mrg-0{ margin: 0px; }

	.mrg-top-30{ margin-top: 30px; }
	.mrg-top-45{ margin-top: 45px; }
	.mrg-top-50{ margin-top: 50px; }

	.mrg-bot-30{ margin-bottom: 30px !important; }
	.mrg-bot-40{ margin-bottom: 40px; }
	.mrg-bot-50{ margin-bottom: 50px; }
	.mrg-bot-60{ margin-bottom: 60px; }
	.mrg-bot-75{ margin-bottom: 75px; }

	.pdd-0{ padding: 0!important; }

	.pdd-15{ padding: 15px!important; }

	.pdd-0-15{ padding: 0 15px!important; }
	.pdd-50-0{ padding: 50px 0 !important; }
	.pdd-80-0{ padding: 80px 0 !important; }
	.pdd-25-0-0{ padding: 25px 0 0 !important; }
	.pdd-0-15-0-0{ padding: 0 15px 0 0  !important; }

	.pdd-lef-30{ padding-left: 30px !important; }
	.pdd-lef-35{ padding-left: 35px !important; }
	.pdd-lef-40{ padding-left: 40px !important; }
	.pdd-lef-45{ padding-left: 45px !important; }
	.pdd-lef-50{ padding-left: 50px !important; }
	.pdd-lef-55{ padding-left: 55px !important; }
	.pdd-lef-60{ padding-left: 60px !important; }
	.pdd-lef-65{ padding-left: 65px !important; }
	.pdd-lef-70{ padding-left: 70px !important; }
	.pdd-lef-75{ padding-left: 75px !important; }
	.pdd-lef-80{ padding-left: 80px !important; }
	.pdd-lef-85{ padding-left: 85px !important; }
	.pdd-lef-90{ padding-left: 90px !important; }
	.pdd-lef-95{ padding-left: 95px !important; }
	.pdd-lef-100{ padding-left: 100px !important; }
	.pdd-lef-105{ padding-left: 105px !important; }
	.pdd-lef-110{ padding-left: 110px !important; }
	.pdd-lef-115{ padding-left: 115px !important; }
	.pdd-lef-120{ padding-left: 120px !important; }
	.pdd-lef-125{ padding-left: 125px !important; }
	.pdd-lef-150{ padding-left: 150px !important; }

	.pdd-bot-50{ padding-bottom: 50px !important; }
	.pdd-bot-100{ padding-bottom: 100px !important; }

	.txt-center{ text-align: center !important; }
	.txt-right{ text-align: right !important; }

	.nao-quebrar{ white-space: nowrap; }

	.align_self-center{ align-self: center; }
	.text_align_last-center{ text-align-last: center; }

	.dpy-flex{ display: flex; }
	.dpy-inline-block{ display: inline-block; }

	.flt-left{ float: left; }
	.flt-right{ float: right; }

	#espacamento{
		height: 110px;
	}

	.btn-laranja{
		background-color: var(--cor-laranja);
    color: var(--cor-branco);
    width: 255px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-montserrat);
    font-weight: var(--font-bold);
    margin-top: 23px;
    font-size: 17px;
		transition: ease .5s all;
	}
	.btn-laranja:hover{
		background-color: var(--cor-azul);
    color: var(--cor-branco);
	}
	
	.btn-azul{
		background-color: var(--cor-azul);
    color: var(--cor-branco);
    width: 255px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-montserrat);
    font-weight: var(--font-bold);
    margin-top: 23px;
    font-size: 17px;
		transition: ease .5s all;
	}
	.btn-azul:hover{
		background-color: var(--cor-laranja);
    color: var(--cor-branco);
	}

/***************************************************************************
	Menu
***************************************************************************/

	header{
		position: relative;
		width: 100%;
		top: 0px;
		z-index: 999999;
	}

	#menu-segundo{
/*		border-top: solid 5px var(--cor-laranja);*/
		height: 122px;
    display: flex;
    align-items: center;
/*		box-shadow: 0 -4px 9px 5px #0000005e;*/
/*		background: var(--cor-branco);*/
	}

	#menu-segundo .logomenu img{
		width: 100%;
		max-width: 220px;
		position: relative;
	}
	#menu-segundo ul.navbar-nav{
		display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
		width: 100%;
	}
	#menu-segundo ul li a .texto p{
		border-bottom: 2px solid transparent;
	}
	#menu-segundo ul li a .texto p:hover{
		color: #a2c037!important;
		border-bottom: 2px solid #a2c037;
	}

	#menu-segundo ul li a{
		display: flex;
    align-items: flex-start;
	}
	#menu-segundo ul li a .texto{
		margin-left: 5px;
		
	}
	#menu-segundo ul li a .texto p,
	#opt_menu ul li a .texto p{
		font-family: var(--font-open);
		font-weight: var(--font-bold);
		color: #FFF;
		margin: -4px 0 0 0;
	}
	#menu-segundo ul li a .texto span,
	#opt_menu ul li a .texto span{
		font-family: var(--font-open);
		font-weight: var(--font-light);
		color: var(--cor-cinza);
		margin: -4px 0 0 0;
		display: block;
		line-height: 19px;
		font-size: 14px;
	}

	
	#menu-segundo .contato{
		padding-top: 20px;		
	}

	#menu-segundo ul li.nav-item{
		height: 60px;
		display: flex;
		padding-top: 20px;
	}
	
	#menu-segundo ul ul {
		float: none;
		margin: 0px 0px;
		padding: 0px 0px;
	}
	#menu-segundo ul ul::after {
		content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 7px;
    left: -7px;
    background: var(--cor-degrade);
    border-radius: 20px;
    z-index: -1;
	}
	
	#menu-segundo ul li li{
		background: var(--cor-branco);
		display: block;
		width: 100%;
	}
	#menu-segundo ul li li:first-child { 
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;	
		padding-top: 15px;
	}
	#menu-segundo ul li li:last-child { 
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
		padding-bottom: 15px;
	}	
	#menu-segundo ul li li a {
		color: var(--cor-preto);
		text-align: left;
		display: block;
		padding: 02px 8px 02px 30px !important;
		position: relative;
		text-decoration: none;
	}
	#menu-segundo ul li li a::before{
		content: "";
    height: 7px;
    width: 7px;
    border-radius: 100%;
    background: var(--cor-degrade);
    display: block;
    position: absolute;
    margin: 9px 0 0 -13px;
	}






	#menu-segundo ul li .submenu a{
		color: var(--cor-preto);
	}
	#menu-segundo ul li .submenu a:hover{
		font-weight: var(--font-bold);
	}

	#menu-segundo ul li .submenu li{
		display: block;
		margin-top: 0;
	}
	#menu-segundo ul > li:hover > ul {
		top: 100%;
	}

	#menu-segundo ul li:hover > ul {
		visibility: visible;
		opacity: 1;
		display: block;
	}
	#menu-segundo ul li > ul {
		flex-direction: column;
		height: auto;
	}

	#menu-segundo ul li ul {
		width: auto;
		position: absolute;
		top: 140%;
		z-index: 10;
		visibility: hidden;
		opacity: 0;
		display: none;
	}

	#menu-segundo .submenu{
		min-width: 203px;
	}
	#menu-segundo .subsubmenu{
		float: right;
		margin: -45px 0 0 203px;
		width: 280px;
		top: auto !important;
	}
	
	.drop #menu-segundo {
    padding: 10px 0;
    background: #77347c;
    border-bottom: solid 2px var(--cor-branco);
	}
	.drop #menu-segundo ul li.nav-item{
		display: flex;
    align-items: center;
	}
	.drop .col-lg-2.contato.desktop{
		align-self: center;
	}

/***************************************************************************
	Banner
***************************************************************************/

	#banner{
		
		min-height: 1080px;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		top: -233px;
    		margin-bottom: -238px;
		    z-index: 9999;
		    background-size: cover;
	}

	#banner h2{
		color: var(--cor-branco);
		font-family: var(--font-open);
		font-weight: var(--font-extrabold);
		font-size: 47px;
    		margin-top: 119px;
		text-shadow: 0 0 10px #00000061;
	}

	#banner p{
		color: var(--cor-branco);
		border-left: solid 3px var(--cor-laranja);
		font-family: var(--font-open);
		font-weight: var(--font-regular);
		font-size: 24px;
		padding-left: 15px;
		line-height: 30px;
    		margin-top: 20px;
		text-shadow: 0 0 10px #00000061;
	}
/***************************************************************************
	Banner
***************************************************************************/
	#fortal_quem{
		background-image: url('https://marcasiteserver.com.br/fortal/wp-content/uploads/2023/10/bg_black.png');
		min-height: auto;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
    		top: -83px;
    		background-size: cover;
    		padding-bottom: 50px;
    		margin-bottom: -83px
	}
/***************************************************************************
	quem somos
***************************************************************************/
	#fortal_quem h2{
		color: #a2c037;
		font-size: 50px;
		margin-top: 120px;
		font-weight: 400;
		margin-bottom: 50px;
	}
	#fortal_quem p{
		color: #fff;
	}
	.quem_img{
		   height: 950px;
    object-fit: contain;
    position: absolute;
    z-index: 9999;
    top: -109px;
	}

/***************************************************************************
	serviços
***************************************************************************/
	#servicos_fortal H2{
		font-size: 50px;
		color: #fff;
		margin-top: 30px;
		margin-bottom: 30px;
		font-weight: 700;
	}
	#servicos_fortal{

	}
	.serv_img{
	        height: 540px;
    object-fit: cover;
    z-index: 9999;
    position: relative;
    top: 90px;
    left: -25px;
	}
	.icones_servi{

   	 margin-bottom: -50px
	}
	.icones_servi img{
		height: 80px;
	}
	
	.marcatexto {
	    box-shadow: 9px 0 0 0 #95c11e, 0px 0 0 0 #95c11e;
	    background: #94c30f;
	    display: inline!important;
	    padding: 4px 4px !important;
	    position: relative;
	    color: #FFF;
	    top: -70px;
    	    left: 90px;
	}
	.icones_servi li{
		position: relative;
		top: -70px;
    	    	left: 90px;
    	    	color: #fff;
	}
	
	.card_serv p{
		padding: 0px 22px 20px 20px;
		color: #fff;
		line-height: 18px;
	}
	.card_serv img{
		width: 90px;
    		padding: 15px;
	}
	.card_serv{
			height: 250px;
		    width: 212px;
		    margin-right: 10px;
		    border: 3px solid #fff;
	}
	.cartoes{
		display: flex;
	}
/***************************************************************************
	Diferenciais
***************************************************************************/
	#dif .sombra{
		position: relative;
		    top: 81px;
		    height: 5px;
		 -moz-box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
	    -webkit-box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
	   box-shadow: 0 13px 25px rgba(0, 0, 0, 0.4);
	}
	#dif{
	  	background-image: url('https://marcasiteserver.com.br/fortal/wp-content/uploads/2023/10/diferenciais_img.png');
		min-height: auto;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	 	margin-top: 50px;
	 	padding-top: 50px;
		padding-bottom: 80px	
	}
	#dif h2{
		font-size: 50px;
		color: #fff;
		font-weight: 700;
	}
	#dif h3{
		font-size: 30px;
	    color: #fff;
	    font-weight: 400;
	}
	#dif img{
		width: 100%;
	}
	.card_dif{
		border: 2px solid #fff;
		height: 280px;
	}
	.card_dif p{
		color: #fff;
		text-align: center;
		padding: 15px;
	}
/***************************************************************************
	Beneficios
***************************************************************************/
	#beneficios{
		margin-top: 50px;
	}
	#beneficios h2{
		font-size: 50px;
		color: #fff;
		font-weight: 700;
	}
	#beneficios h3{
		font-size: 30px;
	    color: #94c30f;
	    font-weight: 400;
	}
	.card_benef{

	}
	.card_benef p{
		padding: 22px 22px 20px 20px;
		color: #fff;
		line-height: 18px;
		text-align: center;
	}
	.card_benef img{
		width: 120px;
    		padding: 15px;
    		margin: auto;
    		display: block;
	}
	.card_benef{
		/*height: 250px;*/
		background:  #94c30f;
		height: 225px;
		 
	}
	.linha{
	    height: 2px;
	    background: #fff;
	    width: 75px;
	    margin: auto;
	    position: relative;
	    top: -10px;
	}
/***************************************************************************
	Contato
***************************************************************************/
	#contato_fortal{
	    background-image: url(../img/mapabg.png);
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: contain;
	    /* margin-top: 50px; */
	    padding-top: 60px;
	    padding-bottom: 90px;
	    margin-top: 60px;
	    margin-bottom: 60px;
	}
	#contato_fortal h2{
		font-size: 50px;
		color: #fff;
		font-weight: 700;
		text-align: center;
		    margin-bottom: 30px;
	}
	.formulario_fortal input::placeholder{
		color: #fff;
		
	}
	.formulario_fortal textarea::placeholder{
		color: #fff;
		
	}
	.formulario_fortal input{
		width: 100%;
		background: transparent;
		border: 2px solid #94c30f;
		height: 50px;
    		margin-top: 20px;
    		color: #fff;
    		padding-left: 15px;
    		font-weight: 500;

	}
	.formulario_fortal textarea{
		width: 100%;
		background: transparent;
		border: 2px solid #94c30f;
		height: 180px;
    		margin-top: 20px;
    		padding-left: 15px;
    		color: #fff;
    		font-weight: 500;
	}
	.btn_enviar{
	     MARGIN: 50px AUTO 0px auto;
	    text-align: center;
	    display: block;
	    color: #fff;
	    background: #94c30f;
	    width: 150px;
	    font-weight: 500;
	    /* height: 51px; */
	    /* padding-top: 15px; */
	    padding: 10px 0;

	}
/***************************************************************************
	Área de Texto
***************************************************************************/

	#area-texto h2{
		color: var(--cor-azul);
		font-family: var(--font-open);
		font-weight: var(--font-extrabold);
		font-size: 35px;
		max-width: 705px;
		margin-top: 30px;
		margin-bottom: 30px;

	}
	#area-texto h2 span{
		color: var(--cor-laranja);
	}

	#area-texto p{
		color: var(--cor-cinza);
		font-family: var(--font-open);
		font-weight: var(--font-regular);
		font-size: 18px;
	}
	#area-texto p b{
		font-style: italic;
	}



#owlinstagram .owl-nav{
	display: flex;
	justify-content: space-between;
	top: 50%;
	position: absolute;
	width: 103%;
	margin-left: -16px;
}

#owlinstagram .owl-prev,
#owlinstagram .owl-next{
	background: var(--cor-laranja);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-radius: 5px;
	font-family: monospace;
	font-size: 34px;
}

#carrossel{
	margin-bottom: 150px;
}

#carrossel .botoes{
	display: flex;
	justify-content: center;
}
#carrossel .botoes a{
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 70px;
}

/***************************************************************************
	Footer
***************************************************************************/

footer a{
    align-self: center;
    margin-left: 6px;
    font-size: 23px;
    color: #fff;
}
footer a:hover{
    color: #fff;
}
.footer-ico::before{
	content:'';
	background-image: url(../img/ping);
}
footer{
	padding-bottom: 70px;
}
#banner_mobile{
		display: none;
	}
/***************************************************************************
	Responsivo
***************************************************************************/
	@media (max-width: 1746px){

		#banner{
			min-height: 991px;
		}
	}
	@media (max-width: 1537px){
		#banner{
			min-height: 875px;
		}
	}
	@media (max-width: 1281px){
		#banner{
			min-height: 740px;
		}
	}
	
	
	@media (max-width: 1199px){
		#menu-segundo ul li.nav-item {
			padding-top: 5px;
		}
		#banner {
			background-position-x: 61%;
		}
		#banner h2 {
			margin-top: 67px;
		}
		#associese{
			padding-top: 82px;
		}

	}
	@media (max-width: 991px){
		header{
			position: fixed;
		}

		#banner_mobile{
		 padding-bottom: 120px;
   		 padding-top: 190px;
   		 display: block;
		}
		
    
		#banner_mobile h2{
			text-align: center;
			color: #fff;
			padding: 0 10px;
    			font-size: 30px;
		}

		.card_serv{
			margin: 15px auto;
		}
		.cartoes{
			display: block;
		}
		.icones_servi img{
			margin-bottom: 10px;
		}	
		.icones_servi{
			margin-bottom: 30px;
		}
		.marcatexto{
			top: 0;
			left: 0;
		}
		.icones_servi li{
			top: 5px;
			left: 0;
		}

		.serv_img{
		    width: 100%;
		    height: inherit;
		    object-fit: cover;
		    z-index: 9999;
		    position: relative;
		    top: 0;
		    left: 0;
		}
		#fortal_quem h2{
			margin-top: 30px;
			margin-bottom: 15px;
		}
		.quem_img{
			    width: 100%;
		   height: inherit;
		    /* object-fit: contain; */
		    position: inherit;
		    z-index: 9999;
		    top: 0;
		}
		.card_dif{
			margin-top: 20px;
		}
		#owlinstagram .owl-nav{
			width: 100%;
			margin-left: 0px;
		}
		#associese{
			background-image: url('../img/fundo-associe-se-mobile.png');		
			padding-top: 29px;
		}

		#banner {
			background-color: #a0a0a2;
			background-image: none;
			min-height: auto;
			padding-bottom: 63px;
		}

		.mobile{display: block;}
		.desktop{display: none !important;}


		header #menu-segundo .hamburguer-bt{
			display: inline-block;
			height: fit-content;
			min-height: 32px;
			margin: 27px 15px;
			float: right;
		}


		header #menu-segundo .hamburguer-bt .hamburguer_line{
			background: #fff;
			width: 30px;
			height: 4px;
			margin: 5px 0;
		}

		header #menu-segundo .hamburguer-bt.ativo .hamburguer-top{
			transform: rotate(45deg);
			margin-top: 11px;
		}

		header #menu-segundo .hamburguer-bt.ativo .hamburguer-middle{
			opacity: 0;
		}

		header #menu-segundo .hamburguer-bt.ativo .hamburguer-bottom{
			transform: rotate(-45deg);
			margin-top: -18px;
		}

		header #opt_menu {
			position: fixed;
			height: calc( 100% - 85px);
			width: 320px;
			background: #3e3d3d;
			z-index: 9;
			right: -150%;
			top: 123px;
			padding-top: 25px;
			display: block;
			overflow: auto;
		}

		header #opt_menu .navbar-nav li a{
			display: flex;
    	align-items: flex-start;
		}

		header #opt_menu.ativo{ right: 0; }

		header .fundo_menu{
			background: #00000096;
			width: 100%;
			height: 100%;
			top: 0;
			right: -100%;
			position: fixed;
			z-index: 8;
		}

		header .fundo_menu.ativo{ right: 0; }

		header #opt_menu .navbar-brand{
			width: 100%;
			margin: 0;
			text-align: -webkit-center;
		}

		header #opt_menu .nav-item{
			text-align: left;
			padding: 10px;
		}
		header #opt_menu .nav-item.social{
			display: flex;
			justify-content: space-evenly;
			margin-top: 20px;
		}

		header.drop #opt_menu,
		header.drop .fundo_menu{
			top: 86px;
		}

		#menu-segundo .logomenu{
			height: 105px;
			margin-top: 0;
			margin-bottom: -20px;
		}

		#menu-segundo {
			background: #6d6d6d; 
			padding-top: 0px;
			position: relative;
			z-index: 99999;
		}

		header #opt_menu li li{
			display: block;
		}
		header #opt_menu li li::before{
			content: "";
			height: 7px;
			width: 7px;
			border-radius: 100%;
			background: var(--cor-branco);
			display: block;
			position: absolute;
			margin: 9px 0 0 -13px;
		}
		header #opt_menu .texto{
			margin-left: 10px;
		}


	}

	@media (max-width: 767px){
		#associese{
			background-image: none;
			background-color: #173d6f;
			min-height: auto;
			padding: 40px 0;
		}
	}

	@media (max-width: 580px){
	}

	@media (max-width: 575px){
		#carrossel .botoes {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}
	}

	@media (max-width: 537px){
	}

	@media (max-width: 444px){
	}