/*Geral*/

	@font-face{
		  font-family: fontRegular;
		  src: url('../assets/montserrat/Montserrat-Regular.ttf');
		  font-weight: regular;
	}	
	@font-face{
		  font-family: fontBold;
		  src: url('../assets/montserrat/Montserrat-Bold.ttf');
		  font-weight: bold;
	}	
	@font-face{
		  font-family: fontBlack;
		  src: url('../assets/montserrat/Montserrat-Black.ttf');
		  font-weight: black;
	}
	:root{
		--pink: #FE10C4;
		--dark-blue: #05398B;
		--light-blue: #0F65E0;
		--second-blue :#002758;
	}
	body{
		overflow-x: hidden;
		font-family: fontRegular;
	}
	ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	a{
		text-decoration: none;
	}
	.custom-button{
		position: relative;
		text-transform: uppercase;
		color: #fff;
		max-width: 400px;
		width: 100%;
		font-weight: 700;
		height: 75px;
		text-align: center;
		font-size: 20px;
		border-radius: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background 320ms ease, color 320ms ease;
	}
	.custom-button i{
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 10px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: ;
	    max-width: 35px;
	    max-height: 35px;
	    width: 100%;
	    height: 100%;
	}

	.whatsapp-icon{
		position: fixed;
	    bottom: 0px;
	    right: 0px;
	    padding: 15px;
	    z-index: 10;
	}

/*Fim Geral*/

/*MENU*/
	.menu-section{
		background-color: var(--pink);
	}
	nav{
		position: relative;
		height: 70px;
		justify-content: space-between;
	}
	.site-logo{
		max-width: 200px;
		max-height: 209px;
		position: absolute;
		top: 50%;
		left: 0px;
		transform: translateY(-50%);

	}
	.site-logo img{
		width: 100%;
		object-fit: cover;
	}
	.menu-list{
		display: flex;
		list-style: none;
		width: 100%;
		margin: 0;
	    max-width: 490px;
        margin-left: auto;
	}
	.menu-list a{
		font-size: 18px;
		text-decoration: none;
		text-transform: capitalize;
		color: #fff;
		transition: color 320ms ease;
	}
	.menu-list a:hover{
		color: var(--dark-blue);
	}

	.mobile-menu{
	 	display: none;
		cursor: pointer;
		position: relative;
		z-index: 5;
	}


	.bar1, .bar2, .bar3{
	 	width: 35px;
		height: 5px;
		background-color: #fff;
		margin: 6px 0;
		transition: 0.4s;
	}

	.change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		transform: rotate(-45deg) translate(-9px, 6px);
	}

	.change .bar2 {opacity: 0;}

	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px);
		transform: rotate(45deg) translate(-8px, -8px);
	}

	.mobile-menu-list{
		background-color: var(--light-blue);
		display: none;
		position: absolute;
	    top: 12px;
	    right: 5px;
	    width: 220px;
	    padding: 15px;
	    z-index: 3;

	}
	.mobile-menu-list li{
	    margin-top: 5px;
	    transition: background-color 320ms ease, color 320ms ease;
	    max-width: 130px;
        padding: 5px;
	}
	.mobile-menu-list li:hover{
		background-color: var(--dark-blue);
		color: #fff;
	}
	.mobile-menu-list li a{
		color: #fff;
	}
	.active{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
/*Fim Menu*/	

/*Seção Banner*/
	.banner-section{
		background-color: var(--second-blue);
		padding-top: 70px;
		height: 720px;
	}
	.custom-container{
		max-width: 1490px;
		width: 100%;
	    padding-right: var(--bs-gutter-x,.75rem);
	    padding-left: var(--bs-gutter-x,.75rem);
	    margin-right: auto;
	    margin-left: auto;

	}
	.banner-pictures{
		margin-top: 5px;
		position: relative;
	}
	.banner-pictures img{
		object-fit: contain;
	}
	.conversion-section img{
		margin-top: 30px;
	}

	.animated-section{
		position: relative;
	}
	.animated-pic{
		position: absolute;
		top: 0;
		right: 9px;
		width: 100%;
		height: 100%;
	}

/*	.moveAnimation{
		animation: animate .05s infinite;
	}

	@keyframes animate{
		0%{
			transform: translateX(5px);
		}

		20%{
			transform: translateX(0px);
		}
		40%{
			transform: translateX(7px);
		}
		60%{
			transform: translateX(-7px);
		}
		80%{
			transform: translateX(0px);
		}

		100%{
			transform: translateX(9px);
		}
	}

	@keyframes animate-mobile{
		0%{
			transform: translateX(calc(-50% + 5px));
		}

		20%{
			transform: translateX(calc(-50% + 0px));
		}
		40%{
			transform: translateX(calc(-50% + 7px));
		}
		60%{
			transform: translateX(calc(-50% - 7px));
		}
		80%{
			transform: translateX(calc(-50% + 0px));
		}

		100%{
			transform: translateX(calc(-50% + 9px));
		}
	}*/

	.banner-button{
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--pink);
	}
	.banner-button:hover{
		background: var(--light-blue);
		color: #fff;
	}

	.banner-button i{
		background-color:#0F65DF;
	}
/*fim Banner*/

/*Responsivo*/

/*	@media only screen and (min-width: 1439px){
		.banner-section{
			height: 720px;
		}
	}*/
	@media only screen and (max-width: 1440px){
		.banner-section{
			height: 600px;
		}
		.conversion-section img{
			max-width: 600px;
		}
		.animated-section img{
			width: 500px;
		}
		.banner-button{
			/*bottom: -50px;*/
		}

	}

	@media only screen and (max-width:  1200px){
		.site-logo{
			padding-left: 15px;
		}
		.banner-section{
			height: 100%;
		}
		.conversion-section img{
			max-width: 520px;
		}
		.banner-button{
		    bottom: -30px;
		}
		.animated-section img{
			width: 350px;
		}
		.custom-button{
			max-width: 360px;
		}
	}
	@media only screen and (max-width: 992px){
		.site-logo{
			max-width: 190px;
		}
		nav{
			justify-content: flex-end;
		}
		.mobile-menu-content{
			display: flex;
			align-items: center;
			margin-left: auto;
		}
		.mobile-menu{
			display: block;
		}
		.menu-list{
			display: none;
			max-width: 700px;
		}
		.menu-list li{
			margin-right: 10px;
		}

		.conversion-section img{
			max-width: 400px;
			margin-top: 0;
		}
		.animated-section img{
			width: 270px;
		}

	}

	@media only screen and (max-width:  768px){
		.banner-section{
			padding-top: 40px;
		}
		.banner-pictures{
			flex-direction: column;
		}
		.animated-section{
			display: flex;
			justify-content: center;
		}
		.animated-pic{
			left: 50%;
    		transform: translate(-50%, 0);
		}
		.moveAnimation{
			animation: animate-mobile .05s infinite;
		}
		.custom-button{
			height: 60px;
			font-size: 15px;
			bottom: -30px;
		}
	}

	@media only screen and (max-width:  578px){
		.site-logo{
			max-width: 150px;
		}
		nav{
			height: 70px;
		}
	}
/*Fim Responsivo*/