/* @import url('./loading.css'); */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('./reset.css');

@import url('./banner.css');

/* COMPONENTS */
@import url('./header.css');
@import url('./footer.css');
@import url('./cardRefeicoes.css');
@import url('./cardKit.css');
@import url('./cardCategoria.css');
/* FIM COMPONENTS */

@import url('./index.css');
@import url('./objetivos.css');
@import url('./a-vendifit.css');
@import url('./buttons.css');
@import url('./access.css');
@import url('./effects.css');
@import url('./allCategories.css');
@import url('./product-details.css');




:root {
/* COLORS */
    --white: #FDFDFD;
    --dark: #515151;

    --light-brown: #F6F3EB;

    --grey: #E6E6E6;
    --medium-grey: #C4C4C4;
    --dark-grey: #A8A8A8;

    --green: #B1B420;
    --medium-green: #9FA21D;
    --dark-green: #8E901A;

    --emerald: #00A9AA;
    --medium-emerald: #009899;
    --dark-emerald: #008788;

    --orange: #EBB22B;
    --medium-orange: #D4A027;
    --dark-orange: #BC8E22;

    --red: #E1411B;
    --medium-red: #CB3B18;
    --dark-red: #B43416;

    --violet: #861757;
    --medium-violet: #79154E;
    --dark-violet: #6B1246;

/* FONT */
    --font-quicksand: "Quicksand", sans-serif;
}

/* CLASS FONT COLOR */
.color-dark { color: var(--dark) !important }
.color-white { color: var(--white) !important }
/* FIM CLASS FONT COLOR */


/* CLASS BG COLOR */
.bg-emerald { background-color: var(--emerald) !important }
.bg-light-brown { background-color: var(--light-brown) !important }
/* FIM CLASS BG COLOR */

.bg-white { background-color: var(--white) !important}
.hidden { display: none !important}

/* CLASS ORDERS  */
.order-1 { order: 1 !important }
.order-2 { order: 2 !important }
.order-3 { order: 3 !important }
.order-4 { order: 4 !important }
.order-5 { order: 5 !important }
/* FIM CLASS ORDERS */

.title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.title h3 {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: medium;
    margin: 16px 0 ;
}

.title a {
    color: var(--dark);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--white);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--dark-green);
  border-radius: 10px;
  border: 2px solid var(--white);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--green);
}

@media (min-width: 768px) {

    body {
		font-size: 16px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	main {
		width: 100%;
        max-width: 1200px;
        margin-top: 86px;
	}

    .refeicoes, .kits, .categorias {
        margin-top: 64px;
    }
    
    .title h3 {
        font-size: 24px;
        font-weight: semibold;
    }
}