@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Lato', 'Poppins', sans-serif;
        transition: all 0.4s ease;;
    }
    /* ===== Colours ===== */
    :root {
        --max-width: 1080px;
        --padding-lateral-container: 20px;
        --branco: #FFF;                /* Branco, usado para fundos */
        --body-color: #F2F2F2;          /* Cor de fundo do corpo */
        --nav-color: #00A859;           /* Verde claro vibrante, principal para navegação */
        --side-nav: #055a3a;            /* Verde escuro, pode ser usado no side-nav ou títulos */
        --verde-claro: #00A859;         /* Verde claro, usado para destaques */
        --verde-claro-opaco: #368a62;   /* Verde claro, usado para destaques */
        --verde-claro-hover: #007B4B;   /* Verde claro, usado para destaques */
        --verde-medio: #055a3a;         /* Verde médio, usado para destaques */
        --verde-medio-hover: #044b2c;   /* Verde médio, usado para destaques */
        --verde-escuro: #044b2c;        /* Verde escuro, usado para destaques */
        --verde-escuro-2: #022914;      /* Verde escuro, usado para destaques */
        --verde-escuro-hover: #033d1e;  /* Verde escuro, usado para destaques */
        --azul-claro: #007BFF;          /* Azul claro, usado para destaques */
        --azul-claro-hover: #0056b3;    /* Azul claro, usado para destaques */
        --azul-medio: #0056b3;          /* Azul médio, usado para destaques */
        --azul-medio-hover: #004a99;    /* Azul médio, usado para destaques */
        --azul-escuro: #004a99;         /* Azul escuro, usado para destaques */
        --azul-escuro-hover: #003d7f;   /* Azul escuro, usado para destaques */
        --vermelho-claro: #FF6A00;      /* Vermelho claro, usado para destaques */
        --vermelho-claro-hover: #E65C00; /* Vermelho claro, usado para destaques */
        --vermelho-medio: #E65C00;      /* Vermelho médio, usado para destaques */
        --vermelho-medio-hover: #D54F00; /* Vermelho médio, usado para destaques */
        --vermelho-escuro: #D54F00;     /* Vermelho escuro, usado para destaques */
        --vermelho-escuro-hover: #C44200; /* Vermelho escuro, usado para destaques */
        --text-color: #FFF;             /* Cor do texto padrão */
        --search-bar: #F2F2F2;          /* Cor da barra de busca */
        --search-text: #010718;         /* Cor do texto na barra de busca */
        --accent-color: #FF6A00;        /* Laranja vibrante, cor de acento */
        --highlight-color: #FFC400;     /* Amarelo brilhante, para destaques */
        --laranja-claro: #FF6A00;         /* Laranja claro, usado para destaques */
        --amaraleo-claro: #FFC400;         /* Amarelo claro, usado para destaques */
        --laranja-claro-hover: #E65C00;   /* Laranja claro, usado para destaques */
        --amaraleo-claro-hover: #E5B800;   /* Amarelo claro, usado para destaques */
        --laranja-medio: #E65C00;         /* Laranja médio, usado para destaques */
        --amaraleo-medio: #E5B800;         /* Amarelo médio, usado para destaques */
        --laranja-medio-hover: #D54F00;   /* Laranja médio, usado para destaques */
        --amaraleo-medio-hover: #D4AC00;   /* Amarelo médio, usado para destaques */
        --laranja-escuro: #D54F00;        /* Laranja escuro, usado para destaques */
        --amaraleo-escuro: #D4AC00;        /* Amarelo escuro, usado para destaques */

        /* cinzas e pretos */
        --cinza-claro: #F2F2F2;         /* Cinza claro, usado para fundos */
        --cinza-medio: #CCC;            /* Cinza médio, usado para textos */
        --cinza-medio-2: #999;          /* Cinza médio, usado para textos */
        --cinza-medio-3: #666;          /* Cinza médio, usado para textos */
        --cinza-escuro: #333;           /* Cinza escuro, usado para textos */
        --cinza-escuro-hover: #222;     /* Cinza escuro, usado para textos */
        --preto: #000;                  /* Preto, usado para textos */

        

        
        --detail-color: #7AE582;        /* Verde claro, usado para detalhes */
        --blue-color: #007BFF; /* Novo azul adicionado */
        --blue-color-hover: #0056b3; /* Novo azul adicionado */
        --blue-dark-color-hover: #0056b3; /* Novo azul adicionado */
    }

    .container
    {
        max-width: 100%;
        padding: 0 1rem;
        margin: 1rem auto;
        padding-left: 75px;
    }

    .container-fluid
    {
        max-width: 100%;
        margin: 1rem auto;
    }
    
    body
    {
        background-color: var(--body-color);
    }


    @media (max-width: 768px)
    {
        .container
        {
            /* padding-left: 0; */
            padding: 8px
        }
    }