

/*------------------------------------------------------------*/
/*----------------------- Responsivo 1 -----------------------*/
/*------------------------------------------------------------*/
@media screen and (max-width: 900px){
    /*-- root fonts nav --*/
	:root{
		/*-- Coles --*/
	    --white-color: #fff;
	    --dark-color: #000000;
	    --primary-color: #006595;	
	    --secundary-color: #ff9900;

		/*-- Fonts size --*/
		--font-size-m: 1rem;
		--font-size-l: 1.3rem;
		--font-size-xl: 1.5rem;
		--font-size-xm: 1.8rem;
	} 
    
    /*==========================================================*/
    /*-- header --*/
    header{
        background-color: var(--dark-color);		        
    }
    
    /*-- Menu desktop --*/
    .menu-desktop{
        display: none;
    }

	/*-- Botao do menu mobile list --*/
	.btn-menu-mobile, .menu-mobile{
		display: block;
	}
	.btn-menu-mobile i{
		color: var(--white-color);
	}
    
	/*-- Hero section --*/
	.hero-section .section-content{
		gap: 50px;
		text-align: center;
		padding: 50px 20px 20px;
		flex-direction: column-reverse;
		justify-content: center;	
	}
	
	.hero-section .hero-image-wrapper{
		max-width: 390px;
		margin-right: 0;
	}
    /*==========================================================*/
	.hero-section .hero-details :is(.subtitle, .description),
	.about-section .about-details, .contact-section .contact-form{
        max-width: 100%;
	}

	.hero-section .hero-details .buttons{
		justify-content: center;
	}

	/*---------------  Sobre nos -------------------*/
	.about-section .section-content{
		gap: 70px;
		flex-direction: column-reverse;
	}	
	.about-section .about-image-wrapper .about-image{
		width: 100%;
		height: 100%;
		max-width: 350px;
		aspect-ratio: 1;
	}

	/*---------------  Menu Cardápio -------------------*/
	.menu-section .menu-list{
		gap: 60px;
	}
    .menu-section .menu-list .menu-item{
    	width: calc(100% / 2 - 32px);    	
    } 
    .menu-section .menu-list .menu-item .menu-image{
    	max-width: 200px;
    }
	/*--------------------- Parceriaas ------------------*/
	.testimonials-section .slider-wrapper{
		margin: 0 0 30px;
	}
	.testimonials-section .swiper-slide-button{
		display: none;
	}

    /*------------------ Galeria de itens ---------------*/
    .gallery-section .gallery-list{
    	gap: 30px;
    }

    .gallery-section .gallery-list .gallery-item{
    	width: calc(100% / 2 - 30px);
    }
    
    /*---------------------- Contatos ------------------*/ 
    .contact-section .section-content{
    	align-items: center;
    	flex-direction: column-reverse;
    }

    /*----------------------- Footer ------------------*/ 
    .footer-section .section-content{
    	flex-direction: column;
    	gap: 20px;
    }

}   

/*--------------------------------------*/
/*----------- Responsivo 2 -------------*/
@media screen and (max-width: 640px){
	.menu-section .menu-list{
		gap: 60px;
	}
    .menu-section .menu-list .menu-item{
    	width: 100%;
    }

    .testimonials-section .slider-wrapper{
    	margin: 0 0 30px;
    }

    .testimonials-section .swiper-slide-button{
    	display: none;
    }

    .gallery-section .gallery-list .gallery-item{
    	width: 100%;
    }

    .footer-section .section-content{
    	flex-direction: column;
    	gap: 10px;
    }
}
