/* Estilo automático para a página: central-de-vendas */
header.preto-branco{
    .logo-header.logo-branca{
        display: block;
    }
    .logo-header.logo-preta{
        display: none;
    }

    .nav-link{
        color: #fff;
    }
}

header{
    .icon-branco{
        display: block;
    }
    .icon-preto{
        display: none;
    }
    li{
        list-style-type: none;
    }
    .nav-link.btn-portal{
        color: #fff;
    }
    .separador-mob {
        display: flex;
    }
    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
        color: #fff;
    }
}

#navegacao-ilustrada {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 555px;
    display: flex;
    align-items: center;

    .text-cab-ilustrado {
        position: relative;
        z-index: 10;
    }

    h1{
        font-weight: 500;
        font-size: 46px;
        line-height: 100%;
        text-align: center;
        color: #fff;
    }

    h2{
        font-weight: 500;
        color: #fff;
        font-size: 18px;
        line-height: 100%;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 20px;

    }

    .nav-ilustrada {
        display: flex;
        margin: 0;
        padding: 0;
        justify-content: center;

        li{
            list-style-type: none;
            font-weight: 400;
            font-size: 15px;
            color: #fff;
            
            .seta {
                margin-right: 8px;
            }
        }

        .nav-destaque{
            font-weight: 500;
            font-size: 15px;
            text-decoration: underline;
            color: #fff;
        }
    }
}

#central{
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    
    .card-central{
        justify-content: flex-start;
        align-items: center;
        display: flex;

        .clicle-central {
            border: 1px solid #1D1D1B;
            box-shadow: 4px 4px 6px 0px #00000014;
            display: flex;
            width: 65px;
            height: 65px;
            align-items: center;
            justify-content: center;
            border-radius: 40px;
            flex: 0 0 auto;

            img{
                object-fit: contain;
                width: 24px;
            }
        }
        
        p{
            font-weight: 400;
            font-size: 15px;
            line-height: 160%;
            color: #575756;
            margin: 0;
            margin-left: 8px;
        }
    }

    .img-central{
        object-fit: cover;
        width: 100%;
        height: 340px;
    }
    
    .alinhar{
        display: flex;
        justify-content: center;
        align-items: flex-start;

        h2{
            letter-spacing: 0;
            font-weight: 500;
            font-size: 37px;
            color: #1D1D1B;
            margin-left: 16px;
            line-height: 100%;
            vertical-align: middle;
            margin-bottom: 20px;
        }


    }

    .text-central {
        font-weight: 400;
        font-size: 16px;
        color: #575756;
        line-height: 160%;
        vertical-align: middle;
        text-align: justify;
    }

}

#agende{
    padding: 60px 0;
    background-color: #F8F8F8;
    position: relative;

    h2 {
        font-weight: 500;
        font-size: 31px;
        line-height: 31px;
        letter-spacing: 0%;
        text-transform: uppercase;
        color: #1D1D1B;
        text-align: center;
        margin-bottom: 10px;
    }
    
   .subtitulo-agende{
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
        text-align: center;
        color: #575756;
        margin: 28px 0 53px;
   }

   .posicao-form{
       position: relative;
       z-index: 1;
   }
   
   .form-control {
       font-weight: 400;
       font-size: 16px;
       line-height: 100%;
       background-color: transparent;
       border: none;
       border-bottom: solid 1px #575756;
       border-radius: 0;
       padding-left: 30px;
   }
   
   .icon-form {
       position: absolute;
       left: 15px;
       top: 8px;
   }
   
   .form-group {
       position: relative;
   }
   
   .form-check {
      font-weight: 400;
      font-size: 16px;
      vertical-align: middle;
      
      a {
          font-weight: 500;
          text-decoration: underline;
      }
   }
   
   .btn-enviar-form{
       display: block !important;
       background-color: #1D1D1B !important;
       border-radius: 0 !important;
       color: #fff !important;
        width: 73%;
        height: 60px;
   }

   .alinhar-final{
        display: flex;
        justify-content: flex-end;
   }
}
  

#agende:before {
    background-image: url(../img/efeito-3.png);
    background-size: contain;
    display: inline-block;
    width: 304px;
    height: 290px;
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    background-repeat: no-repeat;
    z-index: 0;
}
#agende:after {
    background-image: url(../img/efeito-4.png);
    background-size: contain;
    display: inline-block;
    width: 284px;
    height: 290px;
    content: "";
    position: absolute;
    top: 0px;
    right: 0;
    background-repeat: no-repeat;
    z-index: 0;
}





#localizacao{   
    padding: 70px 0;
    background-color: #fff;
    position: relative;  

    h3{
        font-weight: 500;
        font-size: 18px;
        text-transform: uppercase;
        color: #1D1D1B;
    }

    .text-localizacao{
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        color: #575756;
    }

    .alinhar-final{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    iframe{
        width: 100%;
        height: 400px;
        z-index: 1;
        position: relative;
    }

}




#navegacao-ilustrada:before {
    background-image: url(../img/efeito-1.png);
    background-size: cover;
    display: inline-block;
    width: 156px;
    height: 557px;
    content: "";
    position: absolute;
    top: 0px;
    right: 39px;
    background-repeat: no-repeat;
    z-index: 10;
}
#central:before {
    background-image: url(../img/efeito-2.png);
    background-size: contain;
    display: inline-block;
    width: 215px;
    height: 484px;
    content: "";
    position: absolute;
    top: 0px;
    right: -20px;
    background-repeat: no-repeat;
}
@media all and (max-width: 1700px) { 
    #navegacao-ilustrada:before {
        display: none;
    }
    #central:before {
        display: none;
    }
}




/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    .navbar-toggler:focus{
       box-shadow: none; 
    }
    header.preto-branco {
        background-color: rgb(29, 29, 27) !important;
    }
    header {
        .social-header {
            padding: 0;

            .separador-mob {
                display: flex;
                justify-content: space-between;

                .d-left {
                    display: flex;
                }
            }
        }
        .navbar-collapse a {
            color: #fff;
        }

        .dropdown-item.active, .dropdown-item:active {
            background-color: transparent;
            color: #ffffff;
        }
        .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
            color: #fff;
        }

        .dropdown-item.active, .dropdown-item:active {
            background-color: transparent;
            color: #fff !important;
        } 
    }

    #central {
        .card-central {
            margin-bottom: 12px;
        }
    }

    #central {
        .alinhar {
            margin-top: 26px;
        }
    }

    #agende {
        .btn-enviar-form {
            width: 100%;
            text-align: center;
            padding: 0 0;
        }
    }
    #localizacao{
        
        .btn-ler-mais {
            padding: 10px 20px;
        }
    }
}

/* MOBILE */
@media all and (max-width: 767px) { 
    .navbar-toggler:focus{
       box-shadow: none; 
    }
    header.preto-branco {
        background-color: rgb(29, 29, 27) !important;
    }
    header {
        .social-header {
            padding: 0;

            .separador-mob {
                display: flex;
                justify-content: space-between;

                .d-left {
                    display: flex;
                }
            }
        }
        .navbar-collapse a {
            color: #fff;
        }

        .dropdown-item.active, .dropdown-item:active {
            background-color: transparent;
            color: #ffffff;
        }
        .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
            color: #fff;
        }

        .dropdown-menu li{
            color: #fff;
        }



    }
    #navegacao-ilustrada {
        height: 570px;
    }

   #central {
    .card-central {
        margin-bottom: 16px;
        }
    }
    .alinhar {
        margin-top: 30px;
    }

    
    #agende {
        .form-control {
            min-height: 70px;
        }
            .icon-form {
            top: 27px;
        }
    }

}

/* WIDE */
@media (min-width: 1400px) and (max-width: 2600px) {
}