@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html, body{ overflow-x: hidden !important; scroll-behavior: smooth;}
body{font-family: "Roboto", sans-serif;}

.navbar .container{position: relative;}
.navbar-custom {background: transparent;position: absolute;top: 0; width: 100%; z-index: 999;}
.navbar-nav .nav-link {color: #fff;margin-left: 20px;font-weight: 500;}
.navbar-nav .nav-link:hover {color: #fbdf79;}
.nav-link{font-size: 18px; font-weight: 300 !important; }
.navbar-nav .nav-link{margin: 0 15px;}
.nav-item::before, .nav-item::after{content: ""; position: absolute; width: 2px; background-color: #dadad727;height: 25px; top: 25%;}
.border-menu::after{content: ""; position: absolute; width: 2px; background-color: #dadad727;height: 25px; top: 25%; margin-left: 15px;}
.navbar-brand img {height: 130px;}
.contact-info {color: #fff;margin-left: 30px;font-weight: 500;}
.social-menu {position: absolute; right: 0px; top: 28px; display: flex; align-items: end; flex-direction: column;}
.social-icons{display: flex; z-index: 999;}
.social-icons img {width: 25px; margin-left: 5px;}
.tele{text-decoration: none; color: #fff; padding-top: 5px; cursor: pointer;}
.tele:hover{color: #fbdf79; text-decoration: none;}
.d-mobile{display: none;}
.phone{display: none;}


.texto-banner{    position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;z-index: 10;}
.retangulo-1{background-color: #5ba499; width: 320px; border-left: 5px solid #e4a21e;}
.retangulo-2{background-color: #5ba499; width: 400px; border-left: 5px solid #e4a21e;}
.retangulo-1 h2, .retangulo-2 h2{padding: 5px 5px; color: #fff;}
.btn-banner{background-color: #e4a21e; width: 230px; padding: 5px; margin: 0;}
.btn-banner p{color: #fff; margin: 0;}
.btn-banner:hover{background-color: #e6aa34;}
.texto-banner a {text-decoration: none; }
.carousel-control-next, .carousel-control-prev{z-index: 10;}
.carousel-control-prev-icon, .carousel-control-next-icon{background-image: none;}
.carousel-control-prev{left: 130px;}
.carousel-control-next{right: 130px;}


#sobre .row{align-items: center;}
.texto-identidade h1{text-transform: uppercase; color: #5ba499; font-weight: 300; padding: 20px 0;}
.texto-identidade p{font-weight: 300;}
.texto-identidade p span{color: #5ba499; font-weight: 500;}
.btn-identidade{border: none; background-color: #e4a21e; padding: 5px ; color: #fff; border-right: 5px solid #5ba499;}
.btn-identidade img{width: 25px;}
.imagem-dec{padding-top: 30px;}

#produtos{background: linear-gradient(to bottom, #5ba499 0%, #5ba499 75%, #eeeeee 50%, #eeeeee 100%); padding-bottom: 30px;}
#produtos h1{text-transform: uppercase; color: #fff; font-weight: 300; padding: 20px 0;}

#descrcao-produtos{padding: 20px 0;}
.produtos-desc{padding: 20px 0;}
.produtos-desc:nth-of-type(2),
.produtos-desc:nth-of-type(4) {background-color: #eeeeee; }
.produtos-desc h1{text-transform: uppercase; color: #4DB6AC; font-weight: 400;}
.produtos-desc ul {list-style: none;padding: 0;margin: 0 0 15px 0;}
.produtos-desc ul li {margin-bottom: 8px; padding-left: 25px;position: relative;}
.produtos-desc ul li::before { content: "✔"; position: absolute; left: 0; color: #4DB6AC; font-size: 20px;}

#hero-section{ background-image: url("..//img/fundo_produtos.jpg"); background-position: center; background-repeat: no-repeat; margin-top: -20px;}
#hero-section .container{display: flex; align-items: center; justify-content: space-between;}
.hero-content h2{background-color: #5ba499; border-left: 5px solid #e4a21e; padding: 0 5px; color: #fff; font-weight: 300;}
.h2-01{width: 395px;}
.h2-02{width: 305px;}
#hero-section img{position: relative; top: 40px;}

#identidade{padding-bottom: 30px;}
#identidade .container{display: flex; align-items: center;}
.circle{width: 300px; height: 300px; border-radius: 50%; overflow: hidden; margin: 30px 50px; box-shadow: 3px 4px 0px #5ba499;}
.olfactive h1{text-transform: uppercase; color: #5ba499; font-weight: 300; padding: 20px 0;}
.olfactive p{font-weight: 300;}

#contato{background-color: #5ba499; padding: 30px 0;}
#contato h3{text-transform: uppercase; color: #fff; font-size: 25px;}
#contato p{color: #fff; font-size: 14px; }
.quadro{padding-top: 25px;}
.icones-rodape{padding-top: 20px;}
.logo-rodape img{width: 100%;}
.icones-rodape img{width: 30px;}
.redes-ajustadas {margin-left: auto; max-width: 200px; }
.contato-ajustadas {margin-left: auto; max-width: 300px; }

footer{background-color: #172a27; padding: 20px 0;}
footer .row{align-items: center;}
footer p{color: #fff; margin: 0; font-size: 13px;}
.logo-as{text-align: right;}
.logo-as img{width: 60px;}

@media screen and (max-width: 1024px){
    #carrossel .container{max-width: 720px;}
    .texto-banner{padding-top: 60px;}
    .carousel-control-prev{left: 0px;}
    .carousel-control-next{right: 0px;}
    #produtos{text-align: center;}
    #descrcao-produtos{text-align: center;}
}

@media screen and (max-width:960px){
    .navbar-toggler{position: relative; z-index: 1000;}
    .navbar-collapse{position: absolute; right: 0; top: 100px; background-color: #5ba499; max-width: 250px; margin-left: auto;}
    .phone{display: block;}
    .nav-item::before, .nav-item::after{ background-color: #dadad700; top: 0;}
    .border-menu::after{background-color: #dadad700; top: 0;}
    .align-items-center{align-items: end !important;}
    .social-menu{align-items: normal; top: 60px; right: 75px;}
    .tele{display: none;}
    #carrossel .container{max-width: 720px;}
    .texto-banner{padding-top: 60px;}
    .d-desktop{display: none;}
    .d-mobile{display: block;}
    .texto-banner{padding-top: 0px; text-align: center; margin: 0 auto;}
    .retangulo-1, .retangulo-2{margin: 0 auto;}
    .btn-banner{margin: 0 auto;}
    #sobre{text-align: center;}
    #hero-section{background-size: cover; text-align: center; padding: 30px 0;}
    .h2-01, .h2-02{margin: 5px auto;} 
    #hero-section .container{display: block;}
    #hero-section img{top: 0;}
    #identidade .container{display: block; padding: 20px; text-align: center;}
    .circle{margin: 10px auto;}
    #contato{text-align: center;}
    .logo-rodape img{width: 50%; padding-bottom: 30px;}
    .contato-ajustadas, .redes-ajustadas{max-width: 100%;}
    footer{text-align: center;}
    .logo-as{text-align: center;}
}