/* Estilos Gerais */
body {font-family: 'roboto', sans-serif; }
h1, h2, h3, h4 {font-family: 'gemunu libre';}
.row {margin: 0;}
.container {padding: 80px 0;}
p, li {color: #444; font-size: 14px;}

/* Barra de navegação */
header, .navbar {background-color: #f6f7fe;}
#nav-container {padding-top: 0; padding-bottom: 0;}
#logo {width: 8rem;}
.navbar-brand {padding: 0;}
#navbar-links a {color: #186a2b; /*font-weight: bold;*/ cursor: pointer;}
#navbar-links:hover {transition: .5s; color: black; border-bottom: #186a2b 2px ;}
.navbar-expand-lg .navbar-nav .nav-link {padding: 1rem .8rem; }

/* Slider Main*/
.container-fluid {padding: 0;}
#mainSlider .carousel-inner, #mainSlider .carousel-item {height: 90vh; }
#mainSlider .carousel-caption {top: 20%;}
#mainSlider .carousel-caption h2 {text-transform: uppercase; font-family: 'gemunu libre'; font-weight: 600; color: #f6c702; text-shadow: black 0.1em 0.1em 0.2em; font-size: 50px; margin-bottom: 15px;}
#mainSlider .carousel-caption p {font-size: 30px; font-weight: 300; margin-bottom: 350px; color: #fff;}
.main-btn {color: #f6c702; text-transform: uppercase; text-decoration: none;}
.main-btn { background-color: #186a2b; padding: 15px 40px; border-radius: 10px; opacity: .7;}
.main-btn:hover {transition: .5s; opacity: 1;}
.carousel-dark .carousel-indicators [data-bs-target] {background-color: #186a2b;}
.carousel-dark .carousel-indicators .active {background-color: #f6c702;}

/* Modal */
.video-container {position: fixed; top: 0;  left: 0; width: 100%; height: 100vh; z-index: 9999; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: all 0.5s;}
.video-container .close-modal {position: absolute; top: 15px; right: 25px; font-size: 26px; cursor: pointer; color: white;}
.video-container video {height: auto; width: 70%; transform: scale(0); box-shadow:0px 20px 20px rgba(0,0,0,0.5); outline: none; transition: all 0.5s; border-radius: 15px;}
.video-container.show {pointer-events: all; opacity: 1;}
.video-container.show video{transform: scale(1);}

/* Sobre */
#sobre {background-color: #f6f7fe;}
.main-title {margin: 0 0 40px 0; color: #333; font-size: 40px; text-align: center;}
.main-title:after {content:""; border-top: 2px solid #333; width: 5%; position: absolute; margin: 65px 0 0 0 ; left: 47.5%;}
.box-sobre {text-align: justify; margin-top: 30px;}
.box-sobre h3 {text-align: center;}
.box-sobre img {border-radius: 12px; transition: all 0.3s ease-in-out;}
.box-sobre img:hover {transform: scale(1.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}

/*Diferenciais*/
.border-card {border: #adaaaa solid 1px; border-radius: 12px; background-color: #f6f7fe;}
.border-card {transition: all 0.3s ease-in-out;}
.border-card:hover {transform: scale(1.15); box-shadow: 0 0 10px rgba(0 ,0 , 0, 0.5); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #186a2b, #f6c702) border-box; border: 2px solid transparent; border-radius: 12px; }
.card-icon img {height: 70px; text-align: center; display: flex; justify-content: center;} /*ajustar o icone mo meio da div*/
.card-icon {text-align: center;  font-size: 60px; margin: auto; }
.card-diferenciais { margin-top: 30px; padding: 0 40px;}
.col-6.col-md-9 h4 {margin-top: 12px;}

/* Como funciona */
.service-box {text-align: center; margin: 10px 0;}
.service-box img {margin-bottom: 15px; height: 100px; }
.service-box h4 {margin-bottom: 15px;}

/* Nossos Numeros*/
.circle-box div {padding:0 70px;}
.progressbar-text {font-weight: bold; font-size: 28px;}
#data-area h4 {color: #000; text-align: center; margin-top: 15px; font-size: 28px;}

/* Clientes */
.client-box {padding: 0 40px; justify-content: center;}
.card {text-align: center; margin-top: 40px;}
.card-img-top {max-width: 200px;}
#swiper-espace { padding-top:30px; margin-bottom: 20px;}
.swiper-button-next, .swiper-button-prev {color: #186a2b !important; }
.swiper {width: 100%; height: 100%;}
.swiper-slide {text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; padding: 0 50px;}
.swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px;}

/*Beneficios*/
.box-espec {margin-top: 30px; padding-bottom: 20px; }
.box-espec h3 {margin-top: 90px;}
.box-espec h3, .box-espec p {margin-left: 50px; margin-right: 50px; margin-bottom: 16px;}
.box-espec img {border-radius: 12px;}
#beneficios {padding-bottom: 0;}

/* Downloads */
#downloads {padding-top: 0;}
#myTab li button {font-size: 16px; padding: 20px; color: #186a2b;}
#myTabContent {padding: 20px;}
#home a, #profile a {text-decoration: none; color: #186a2b; transition: 0.5s;}
#home a:hover, #profile a:hover {border-bottom: #186a2b solid 1px;}

/* Footer */
#box-footer {background-color: #f6f7fe; text-align: center;}
.box-contato {padding-bottom: 30px; margin-bottom: 50px; border-bottom: solid #186a2b 1px;}
.box-contato i {font-size: 24px; color: #186a2b; border:solid #186a2b 1px; border-radius: 50%; width: 60px; height: 60px; line-height: 60px; margin-bottom: 20px; margin-top: 20px;}
.box-contato span {font-weight: bold; color: #186a2b;}
.box-formulario input[type="text"], .box-formulario input[type="email"], .box-formulario input[type="tel"], .box-formulario textarea {margin-bottom: 10px; color:#186a2b; }
#btn-formulario {text-transform: uppercase; background-color: #fff; color: #186a2b; border: solid #186a2b 2px; border-radius: 8px; opacity: 1; padding: 10px 60px; transition: 0.5s;}
#btn-formulario:hover {background-color: #f6c702;}

/* Creditos */
#box-creditos {text-align: center; text-decoration: none;}
#box-creditos .container {padding: 10px 0px}
#box-creditos .container a {font-weight: bold; color: #186a2b;}
#box-creditos .container a:hover {text-decoration: none; color: #000;}

@media  screen  and ( max-width: 1440px) {

    /* Banner */    
    #mainSlider .carousel-caption p {margin-bottom: 200px;}
    #mainSlider .carousel-inner, #mainSlider .carousel-item {height:90vh; }

    }
    
@media screen and (max-width: 1024px) {
    
    /* Slider Main*/
    #mainSlider .carousel-caption {top: 30%;}
    #mainSlider .carousel-inner, #mainSlider .carousel-item {height: 70vh; }
    #mainSlider .carousel-caption h2 {font-family: 'gemunu libre'; font-weight: 600; color: #f6c702; text-shadow: black 0.1em 0.1em 0.2em; font-size: 40px; margin-bottom: 14px;}
    #mainSlider .carousel-caption p {font-size: 24px; font-weight: 300; margin-bottom: 140px; color: #fff;}
    
    /* Modal */
    .video-container {justify-content: center; align-items: center; height: 70%; ;}

     /* Diferenciais */
    .border-card { display: grid; grid-template-columns: 100%;}
    .col-6 {width: 100%;}
    .card-icon img {height: 50px; margin: 10px auto;}
    .col-6.col-md-9 h4 {text-align: center; margin-top: 0;}

    /* Como Funciona */
    .service-box img {height: 70px; }

    /* Nossos Numeros*/
    .circle-box div {padding: 0 20px;}
    .progressbar-text {font-weight: bold; font-size: 24px;}
    #data-area h4 {font-weight: bold; text-align: center; margin-top: 15px; font-size: 24px}

    /* Nossos Clientes */
    .client-box {padding: 0 20px;}

    /* Beneficios */
    .box-espec { margin-top: 20px; padding: 0  40px;}
    .box-espec h3 {margin-top: 20px}

}

@media screen and (max-width: 768px) {

        
    /* Slider Main*/
    #mainSlider .carousel-inner, #mainSlider .carousel-item {height:auto; }
    #mainSlider .carousel-caption h2 {font-size: 30px;}
    #mainSlider .carousel-caption p {font-size: 18px; margin-bottom: 120px;}
    .main-btn {padding: 10px 30px; border-radius: 10px;}
 
    /* Sobre */
    .box-sobre {display: grid; grid-template-columns: 100%;}
    .col-md-6.box-sobre {width: 100%;}

    /* Diferenciais */
    .border-card { display: grid; grid-template-columns: 100%;}
    .col-6 {width: 100%;}
    .card-icon {font-size: 45px;}
    .col-6.col-md-9 h4 {text-align: center; margin-top: 0;}

    /* Nossos Numeros*/
    .circle-box div {padding: 0 20px;}
    .progressbar-text {font-weight: bold; font-size: 20px;}
    #data-area h4 {font-weight: bold; text-align: center; margin-top: 15px; font-size: 20px}

    /* Benefícios */
    .box-espec h3, .box-espec p { margin:0 0 16px 0px;}

}

@media screen and (max-width: 425px) {

    /* Geral */ 
    .container {padding: 50px 0;}

    /* Slider Main*/
    /* #mainSlider .carousel-inner, #mainSlider .carousel-item {height: 30vh; } */
    #mainSlider .carousel-caption h2 {font-family: 'gemunu libre'; font-weight: 600; color: #f6c702; text-shadow: black 0.1em 0.1em 0.2em; font-size: 30px; margin-bottom: 14px;}
    #mainSlider .carousel-caption p {font-size: 14px; font-weight: 300; margin-bottom: 70px; color: #fff;}
    .main-btn { background-color: #186a2b; padding: 7px 20px; border-radius: 3.5px; opacity: .7;}

    /* Nossos Numeros*/
    .circle-box {width: 50%;}
    .circle-box h4 {padding: 10px  40px;}
   

    /* Nossos Clientes */
    .client-box {padding: 0 40px;}

    /* Benefícios */
    .box-espec h3 {display: flex; justify-content: center;}
    #myTab li button {font-size: 14px; padding: 10px; color: #186a2b;}
    #home a, #profile a {font-size: 14px;}
    #box-espec-order1 {order: 2;}
    #box-espec-order2 {order: 1;}
    #box-espec-order3 {order: 3;}
    #box-espec-order4 {order: 4;}
    #box-espec-order5 {order: 6;}
    #box-espec-order6 {order: 5;}
    #downloads {padding-top: 10px;}

    /* Contato */
    .box-contato {margin-bottom: 0px ; border-bottom: none;}

    /* Clientes */
     
    .card-img-top {width: 100px;}
   

}