@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primary-color: #0B4A34;
    --secondary-color: #009049;
    --primary-gray: #D6D6D6;
    --secondary-gray: #F3F3F3;
}

* {
    font-family: 'Poppins', sans-serif;
}

html {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--secondary-color);
}

.bg-primary {
    background-color: var(--primary-color)!important;
}

.bg-secondary {
    background-color: var(--secondary-color)!important;
}

.color-primary {
    color: var(--primary-color)!important;
}

.color-secondary {
    color: var(--secondary-color)!important;
}

.bg-primary-gray {
    background-color: var(--primary-gray);
}

.bg-secondary-gray {
    background-color: var(--secondary-gray);
}

.color-primary-gray {
    color: var(--primary-gray);
}

.color-secondary-gray {
    color: var(--secondary-gray);
}

#menuPrincipal .nav-link,
#menuPrincipal .dropdown-menu .dropdown-item {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
#menuPrincipal .dropdown-menu .dropdown-item:focus {
    background-color: transparent!important;
}

#menuPrincipal .nav-link:hover,
#menuPrincipal .dropdown-menu .dropdown-item:hover {
    color: var(--secondary-color)!important;
}

.nav-pills .nav-link {
    background-color: var(--primary-gray);
    color: #000000;
    text-decoration: none;
    margin: 0.5rem;
}
.nav-pills .nav-link:hover {
    background-color: var(--secondary-color)!important;
    color: #ffffff;
}

.list-group-item-action {
    width: auto!important;
}

.list-group-item+.list-group-item.active {
    margin-top: 0.5rem;
    border-top-width: auto;
}

.owl-carousel .owl-item .item img {
    border: 1px solid transparent;
    border-radius: 2rem!important  ;
}
.owl-carousel .owl-nav {
    display: none!important;
}
.owl-carousel .owl-dots {
    margin-top: 10px;
}

#btnsOwlCarrossel button {
    border: none;
    background: transparent;
}

#btnsOwlCarrossel button img {
    width: 2.5rem;
}

#divBgPneus {
    background-image: url('../assets/imagens/sustentabilidade.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.hr-titulo, #divBgPneus .hr {
    width: 12rem;
    height:  2px;
    background-color: var(--secondary-color)!important;
}

.efeito-vidro {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8.5px);
    -webkit-backdrop-filter: blur(8.5px);
    border-radius: 10px;
}

form label {
    font-weight: 500!important;
}

form input, form textarea {
    border: none!important;
    background-color: #e9eaeb!important;
    border-radius: 1rem!important;
}

.footer {
    background-color: #eff2f5;
    color: #555555;
}

.footer h5 {
    font-weight: 700;
}   

.footer .nav a {
    font-weight: 500;
    text-decoration: none;
    color: #555555;
}

.footer .redes-sociais a {
    background-color: #ffffff;
    font-size: 1.5rem;
    border-radius: 50%;
    margin: 1rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    text-decoration: none;
    color: #555555;
}

.footer .redes-sociais a:has(> .fa-facebook-f) { 
    padding: 0.7rem 1.3rem
}

.footer .redes-sociais a:has(> .fa-instagram) { 
    padding: 0.7rem 1.15rem
}

.footer .redes-sociais a:has(> .fa-twitter) { 
    padding: 0.7rem 1.1rem
}

.footer .nav p {
    font-weight: 500;
    text-decoration: none;
    color: #555555;
}

/* Dispositivos Móveis */
@media screen and (min-width: 320px) and (max-width: 480px) {}

/* iPads e Tablets */
 @media screen and (min-width: 481px) and (max-width: 768px) {}
  
/* Telas pequenas e Notebooks */
@media screen and (min-width: 769px) and (max-width: 1024px) {}
  
/* Telas grandes e Desktops */
@media screen and (min-width: 1025px) and (max-width: 1200px) {}
  
/* Telas muito grandes e TVs */
@media screen and (min-width: 1201px) {}