@import url('assets/bootstrap.min.css');
@import url('assets/owl.carousel.min.css');
@import url('assets/owl.theme.default.min.css');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css');

.bi {font-display: swap;}
:root {
    --principal-color: #0ba3cc;
    --dark-color: #131326;
    --medium-color: #3e3e51;
}
body {
    background-color:var(--dark-color);
    font-size: 17px;
    color:#fcfcfc;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}
h2 { font-size: 28px; z-index: 999;}
h3 { font-size: 24px;}
h1,h2,h3,h4,h5,h6 { font-weight: 700;}
strong { font-weight: 700; }
p { text-align: justify; font-weight: 300;}
.lead { max-width: 890px; width: 90%; font-size: 1rem; margin-left:auto; margin-right:auto;}
a:hover { text-decoration: none; color:white}

#hero {
    background-color:#0e1029;
    background-image: url(img/bg-hero.webp);
    background-size:160% auto;
    background-position:0px 0px;
    background-repeat: no-repeat;
    padding:20px 0 70px;
    position: relative;
}
h2 span, h3 span { color: var(--principal-color);}
#hero .logo { position: absolute; top:20px; left:50%; transform: translateX(-50%);}
#hero .img-hero { width: 90%; margin:20px 5% 0 5%;}
#hero .headline { background:rgba(0,0,0,0.2); margin:0 20px; border-radius: 10px; border:1px solid var(--medium-color);  text-align: center; padding: 20px;}
#hero .headline h2 { font-size: 1.4rem;}

@media screen and (min-width:768px) {
    h2 { font-size: 36px;}
    h3 { font-size: 26px;}
    #hero{
        padding:30px 0 0 0; margin:0;
        background-size:100%;
        background-position: 0 0;
    }
    #hero .img-hero { width: 110%; margin-left: -5%;}
    #hero .logo { left: 0; top: 12px; transform:none;}
    #hero .headline { background:none; border:0; padding:0; margin:0; text-align: left;}
    #hero .headline h2 { font-size: 29px;}
}

.bg-bluelight h3 { color:var(--dark-color); max-width: 780px; margin:0 auto;}
.bg-bluelight {
    background-color: var(--principal-color);
    background-image: url(img/bg-light.webp);
    background-size: cover;
    padding:70px 0;
    text-align: center; color: #222; font-size: 18px;}
.bg-bluelight .container {margin:0 auto; padding:0;}
.bg-bluelight .lead { max-width: 500px; margin:0 auto; font-weight: 500;}
.bg-bluelight .lead span { color:white;}

.lista-video {  list-style: none;  max-width:890px; margin:0 auto; padding:0}
.lista-video li { margin-bottom: 8px; font-size: 20px;transition:0.3s; font-weight: 500; }
.lista-video li i { color:white; margin-right: 10px; transition:0.3s}
.lista-video li:hover { color:white;}
.lista-video li:hover i { margin:0;}
@media screen AND (max-width:768px) {
    .lista-video li { font-size: 1rem;}
    .bg-bluelight .lead, .bg-bluelight .area-cta { max-width: 500px; margin:0 auto; font-weight: 500; font-size: 1rem;}
}

.video .area-video {margin:20px auto;}

.youtube-thumbnail-container, .video iframe {
    margin:0;
    width:100%; height: 230px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    z-index: 999;
}
.youtube-play-button {
    position: absolute; top: 50%;left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 54px; height: 54px; border-radius: 50%;
    background-color: white; background-image: url(img/play.webp); background-repeat: no-repeat; background-size: contain;
    cursor: pointer; transition: 0.2s; opacity: 0.8;
}
.youtube-thumbnail-container:hover .youtube-play-button{ 
    transform: translate(-50%, -50%) scale(1.2); box-shadow: 8px 4px 30px #ccc;}

.area-cta { text-align: center; margin: 30px 0;}

.btn-cta { 
    transition:0.2s;
    background-color:var(--principal-color); 
    color:var(--dark-color);
    font-weight: bold; text-transform: uppercase;
    font-size: 18px;
    border:1px solid white; 
    padding:12px 0; border-radius:30px;
    cursor: pointer;
    max-width: 580px; margin:0 auto;
}
.btn-cta a {  color:var(--dark-color); }
.btn-cta:hover { transform:scale(1.05);  box-shadow: 8px 4px 10px rgba(255, 255, 255, 0.2);}

.bg-bluelight .btn-cta {
    background-color:white;
    border-color: var(--principal-color);
    color: var(--principal-color);
    box-shadow: 8px 4px 10px rgba(255, 255, 255, 0.2);
}
.bg-bluelight .btn-cta a {color: var(--principal-color); }

@media screen and (min-width:768px) {
    .video {}
    .video .area-video { max-width: 840px;}
    .youtube-thumbnail-container, .video iframe { height: 480px; border-radius: 20px;}
    .youtube-play-button {width: 114px;height: 114px;}
    .btn-cta { font-size: 25px; padding:10px 80px;}
}

.garantia { 
    background:url(img/bg-garantia.webp) no-repeat center var(--dark-color);
    background-size: 100% auto;
    padding:100px 0;
}
.garantia h2 { font-size: 27px;}
.caixa { background:rgba(0,0,0, 0.2); border-radius: 10px; border:1px solid var(--medium-color); padding:20px;}
.caixa-60p { background:rgba(5,5,24, 0.6); border-radius: 10px; border:1px solid var(--medium-color); padding:20px;}
.glow {border:1px solid var(--principal-color); box-shadow: 0px 0px 30px var(--principal-color);}
.garantia .glow { max-width: 840px; margin:0 auto; padding:30px 20px;}
.garantia .area-selo { text-align: center;}

.resultados .caixa { 
    padding: 30px 20px 30px;
    font-size: 0.9rem;
    height: 100%;
    transition: 0.3s;
    position: relative;
}
.resultados .caixa:hover {border-color: var(--principal-color);}
.resultados .caixa p { text-align:center; padding: 10px 0 0 10px;}
.resultados .caixa p span { color:var(--principal-color); font-weight: 500;}
.resultados .icon { 
    position: absolute; top: -28px; left: -20px;
    width: 50px; height: 50px; border-radius: 100%;
    background-color: var(--principal-color); text-align: center;}
.resultados .icon i{ font-size: 32px; transform: scale(1.2);}
 
.argumentos { padding:80px 0; background-image:url(img/bg-check.webp); background-size:140% auto; background-repeat: no-repeat;}
.argumentos .col-md-6 { margin:0 15px 20px; font-size: 0.86rem; }
.argumentos .foto-02 { width: 75%; margin:0 auto;}

.item-check-box {
    border-bottom: 1px solid transparent;
    display: flex;
}

.icon-check-box {
    border:1px solid rgba(255, 255, 255, 0.5); width: 30px; height: 30px; border-radius: 4px;
    text-align: center;
    position: relative;
    
}
.icon-check-box i { 
    font-size: 50px; line-height: 50px;
    position: absolute; top:-15px;left:-15px; color: var(--principal-color);
    margin-right: 0px; padding: 0;} 

@media screen and (min-width:768px) {
    .garantia h2 { font-size: 28px;}
    .garantia .area-selo { margin-top: -40px; }
    .garantia .glow { padding:50px 40px;}
    .argumentos { background-size: cover;}
    .argumentos .col-md-6 { margin:0 0 25px 0;}
    .argumentos .foto-02 { width: 90%;}
}

section.brain { padding-bottom: 50px;}
.box-brain, .box-brain2 { text-align:center; position: relative; }
img.brain { width: 100%; position: absolute; left: 0%;}
.brain h2 { position: relative; z-index: 9; margin:40px 0 340px; text-align: center;}
.lista-brain li{ margin:0 0 36px 0; padding:0; font-size: 16px; list-style: none; position: relative;}
.lista-brain li i { font-size: 50px; position: absolute; left: -40px; top: -25px;}

.dots { position: relative; display: none;}
.dots div { position: absolute;}
.dots .dot1 { left: 31px; top: 140px; }
.dots .dot2 { left: 275px; top: 160px; }
.dots .dot3 { left: 324px; top: 231px; }
.dots .dot4 { left: 269px; top: 322px;}
.dots .dot5 { left: 470px; top: 270px; }
.dots .dot6 { left: 371px; top: 412px; }
.dots i{ font-size: 50px;}

@media screen and (min-width:490px) and (max-width:767px) {
    .brain h2 { margin-bottom: 460px;}
}

@media screen and (min-width:768px) {
    .brain h2 { margin-bottom: 40px;}
    .lista-brain { margin-top: 50px; margin-left: 0; padding:0;}
    .box-brain { display:block;position:relative; min-height: 20px;}
    img.brain {width: 754px; position:absolute; z-index: -1; left: -147px; top: 0;}
    .lista-brain li:nth-child(2),.lista-brain li:nth-child(5) {margin-left: 30px;}
    .lista-brain li:nth-child(3), .lista-brain li:nth-child(4) {margin-left: 60px; margin-bottom: 36px;}
}

.pilares { 
    padding-top: 50px;
    font-size: 1rem;
    background-image:url(img/bg-rightp.webp),url(img/bg-leftp.webp);
    background-position: right -90px, left bottom; background-repeat: no-repeat;}

.pilar-item { display: flex; align-items: top; padding: 10px; margin-bottom: 30px;}
.pilar-item .numero{ 
    width: 17%;
    font-weight: 900;
    text-align: center; font-size: 40px;
    position: relative; }
.pilar-item .numero::after{ 
    content: 'pilar'; background:var(--principal-color);
    font-weight: normal; font-size: 20px; position: absolute;
    left: 0; top: 50px; width: 100%;
}
.pilar-item .texto {padding:0 10px; width: 83%;}
.pilar-item .texto strong { color:var(--principal-color); font-size: 1.3rem;}

@media screen and (min-width:768px) {
    .box-pilares {
        background:url(img/5-pilares.webp) no-repeat left; background-size:auto 100%;
        padding-left: 120px;
    }
    .pilar-item { padding: 20px 10px 10px 10px;}
    .pilar-item .numero{ width: 20%; font-size:130px; line-height: 140px; margin:0;}
    .pilar-item .numero::after{left: 50%; top: 40%; transform: translate(-50%,-50%);
        padding:0 22px; line-height: 26px; font-size: 26px; width: auto;}
    .pilar-item .texto {padding:0 20px; width: 80%;}
    
}

.como-funciona, .motivos, .famosos, .quem-e { padding: 68px 0; font-size: 1rem;}
.como-funciona .caixa { font-size: 16px; padding: 30px;}
.como-funciona { background:url(img/bg-lamp.webp) no-repeat; background-size:210% auto; background-position: -100px 100px;}

.motivos { background: url(img/bg-circuito.webp) no-repeat; background-size:250% auto; background-position: right top; background-attachment: fixed;}
.motivos-lista {}
.motivos-lista > div { margin-bottom: 28px; text-align: center;}
.motivos-lista > div .icon-circle{ 
    background:var(--principal-color); width:85px; height: 85px; line-height: 85px;
    font-size: 55px;  border-radius:50%; margin:0 auto; margin-bottom: 12px;}

.motivos-lista h5 { font-size: 1rem;}

.bill { display: flex; align-items: center; flex-direction: column; position: relative; min-height: 540px; padding-top: 30px;}
.bill .citacao { position: absolute; bottom: 0;}
.bill .citacao p{ padding:0 20px; margin:0; font-style: italic;}
.bill .citacao:before { 
    content: "\201C";
     font-weight: 900; display: block; height: 100px; font-size: 200px; line-height: 160px; opacity: 0.5;}
.bill .citacao:after { 
    content: "\201D"; display: block;
    font-weight: 900; font-size: 200px; line-height: 200px; height: 100px; text-align: right; opacity: 0.5;}
.bill-image img {mix-blend-mode: luminosity; margin:0 auto; width:100%;}
.bill-image div {position: absolute; bottom: 12px; left: 12px;}

.famosos .owl-carousel ul { padding:0; margin:0; overflow: hidden;}
.famosos .owl-carousel ul li{ background-color:var(--dark-color); height: 240px; list-style: none; float: left; text-align: center; width: 50%; padding:20px; font-size: 0.9rem;}
.famosos .owl-carousel ul li strong { display: block;}
.famosos .owl-carousel ul li img {  mix-blend-mode:luminosity; max-width: 75%; margin:0 auto; margin-bottom: 5px; border-radius:50%;}

.quem-e { background:url(img/bg-about.webp) no-repeat center; background-size:auto 30%; padding-bottom: 50px;}

.pricing { color: white;}
.pricing .caixa { 
    background:linear-gradient(to bottom,rgba(19,19,42,0.5),rgba(0,155,206,0.5));
    border-color:rgba(255, 255, 255, 0.5);
    margin: 10px;
}
ul.list-check { list-style-type: none;}
ul.list-check li { margin-bottom:7px;}
ul.list-check li::before {
    content: "\2713"; 
    margin-right: 12px;
}
.selo-garantia {
    margin:0 auto 50px; text-align: center; display: flex; justify-content: center;
}
.selo-garantia img { height: auto !important;}
.selo-garantia h6 { font-size: 32px; font-weight: 900;}
@media screen and (min-width:768px) {
    .bill { flex-direction: row;}
    .bill-image { width: 50%;}
    .bill .citacao { width: 50%; position: relative;}
    .bill .citacao p { padding: 0;}
    .bill-image img {margin-left: -100px; width: auto;}
    .como-funciona { background:url(img/bg-lamp.webp) no-repeat; background-position: calc(50% - 70px) center;}
    .motivos { background-size: auto; background-position: center;background-attachment:inherit;}
    .quem-e { background:url(img/bg-about.webp) no-repeat center; background-size: auto; padding-bottom: 60px;}
    .quem-e  img { display: inline;}
    .quem-e .caixa { padding:30px; background:rgba(0,0,0, 0.1);  margin-right: 50px;}
    .pricing .caixa {padding:70px;margin: 0; }
}

.whatsapp-box { text-align: center; padding:140px 0 110px; font-size: 25px;}
.whatsapp-box strong { color:var(--principal-color);}
.btn-whatsapp { font-size: 20px; margin: 30px; display: inline-block; width: auto; background:#1bd741; color:#222; font-weight: 600; padding:12px 22px; border-radius:10px; transition:0.3s;}
.btn-whatsapp:hover { background:#005411;}

.faq { padding-bottom: 100px; background:url(img/bg-faq.webp) no-repeat right top;}
.faq .caixa { padding:0; margin-bottom: 8px;}
.faq .caixa button{ padding:12px; color:white; font-weight: 600; position: relative; font-size: 18px;}
.faq .caixa button:after { content:'+'; position: absolute; right:10px; font-size: 30px; line-height: 30px; top: 10px;}
.faq .caixa .resposta { padding:20px; font-size:1rem;}

.modal-content { border-radius:10px; border:1px solid var(--principal-color); padding:12px; color:var(--dark-color)}

.depoimentos { max-width: 650px; margin:20px auto;}
.depoimentos .item {
    background:rgba(0,0,0, 0.4);
    border-radius: 10px; border:1px solid var(--medium-color); padding:20px 40px;
}
.depoimentos .item img { width: 100px; height: 100px;}

.depoimentos .quote { font-size: 70px; margin: 0 0 15px 15px; float: right;}
.depoimentos .quote-text { font-style: italic; margin-bottom:45px;}
.depoimentos .quote-author { color:var(--principal-color); margin-bottom: 0;}

.btn-primary { background-color:var(--principal-color); color:white; border:var(--medium-color); border-radius:30px; font-size: 1.3rem; padding:8px 30px; margin-top: 12px;}
.btn-primary:hover { background-color:var(--medium-color)}

.form-area-aviso { color:red; font-size: 0.8rem;}

.text-primary {color:var(--principal-color);}