/*****************************************************************************/ /*** ***/ /*** INDUSTECK ENGENHARIA E AUTOMAÇÃO INDUSTRIAL ***/ /*** ARQUIVO COM PADRÕES RESPONSIVOS PARA O SITE ***/ /*** VERSÃO: 01 ***/ /*** JUL - 2026 ***/ /*** ***/ /*****************************************************************************/ /*****************************************************************************/ /*** ***/ /*** 1 - INDICE ***/ /*** ***/ /*****************************************************************************/ /* 1 - INDICE 2 - PARA LAYOUTS ENTRE 768px e 991px 2.1 - SLIDER 2.2 - NOSSOS SERVIÇOS 2.3 - NOSSOS RECURSOS 2.4 - SOBRE NÓS 2.5 - ATUAÇÃO 2.6 - FAQ'S 2.7 - TESTEMUNHO CLIENTES 2.8 - CONTATO 2.9 - NEWSLETTER 3 - PARA LAYOUTS ATÉ 768px 3.1 - SLIDER 3.2 - NOSSOS SERVIÇOS 3.3 - NOSSOS RECURSOS 3.4 - SOBRE NÓS 3.5 - ATUAÇÃO 3.6 - FAQ's & NOTÍCIAS 3.7 - TESTEMUNHO CLIENTES 3.8 - NEWSLETTER 4 - EFEITOS DE HOVER DOS CARDS DA SEÇÃO */ /*****************************************************************************/ /*** ***/ /*** 2 - PARA LAYOUTS ENTRE 768px e 991px ***/ /*** ***/ /*****************************************************************************/ @media (min-width: 768px) and (max-width: 991px) { /*****************************************************************************/ /*** 2.1 - SLIDER ***/ /*****************************************************************************/ .rev_slider_wrapper {height: 350px;} .slide-content {padding: 0 40px 40px 40px;} .nav-btn {display: none;} .slide-content p {font-size: 14px; line-height: 1.2; margin-bottom: 5px; max-width: var( --largura_maxima_texto_slider_resp);} .caption-title {font-size: 16px;line-height: 1.2;margin-bottom: 5px; max-width: calc(var(--largura_maxima_texto_slider_resp) - 200px);} .btn {width: 100px; height: 25px; padding: 0 10px; font-size: 12px;} .bottom-mask-bar {height: 40px;padding: 0 10px;} .bottom-mask-text {font-size: 13px;letter-spacing: 0.1px;} /*****************************************************************************/ /*** 2.2 - NOSSOS SERVIÇOS ***/ /*****************************************************************************/ .nossos-servicos.section-padding{padding: 30px 0;} .nossos-servicos .servico h3{font-size: 16px; margin-top: 10px; margin-bottom: 5px;} .nossos-servicos p{ font-size: 14px; line-height: 20px;} .nossos-servicos .caption-box-wrapper{margin-top: 25px;} .nossos-servicos .single-our-service-caption-box {padding-top: 30px; flex-direction: column; gap: 10px;} .nossos-servicos .single-our-service-caption-box .img-box {width: 100%; max-width: none; height: 110px;} .nossos-servicos .single-our-service-caption-box .content-box {padding: 0;} .nossos-servicos .single-our-service-caption-box .content-box a h3 {font-size: 16px; line-height: 26px; margin-bottom: 5px;} .nossos-servicos .single-our-service-caption-box .content-box p {font-size: 14px; line-height: 20px;} /*****************************************************************************/ /*** 2.3 - NOSSOS RECURSOS ***/ /*****************************************************************************/ .our-features .single-our-feature {padding: 40px 15px;} .our-features .single-our-feature .icon-box {margin-bottom: 10px;} .our-features .single-our-feature h3 {font-size: 16px; line-height: 20px; min-height: 56px; margin-bottom: 5px;} .our-features .single-our-feature p {font-size: 15px; line-height: 20px;} .our-features .single-our-feature .overlay .box .box-content a {padding: 0 40px; font-size: 13px; line-height: 40px; transform: translate3d(0, 40px, 0);} .our-features .single-our-feature .overlay .box .box-content a::before, .our-features .single-our-feature .overlay .box .box-content a::after {width: 40px; height: 100%;} .our-features .single-our-feature .overlay .box .box-content a::before {left: -15px; transform: skew(-37deg);} .our-features .single-our-feature .overlay .box .box-content a::after {right: -15px; transform: skew(37deg);} /*****************************************************************************/ /*** 2.4 - SOBRE NÓS ***/ /*****************************************************************************/ .about-section.section-padding{padding: 30px 0;} .about-section .container .team-wrapper .col-lg-3.col-md-6.col-sm-12 .membro{ width: 75%; margin: 0 auto;} .team-wrapper{margin-top: 30px; padding-top: 34px;} .single-team-member .img-box {width: 260px; height: 270px;} .single-team-member h3{font-size: 18px; margin-top: 10px; margin-bottom: 5px;} .single-team-member p {line-height: 20px;} .single-team-member p.position{margin-bottom: 5px;} .single-team-member p.info {margin-top: 3px;} .row.team-wrapper > div:nth-child(3), .row.team-wrapper > div:nth-child(4) {margin-top: 30px;} /*****************************************************************************/ /*** 2.5 - ATUAÇÃO ***/ /*****************************************************************************/ .call-to-action-home {padding: 60px 0;} .call-to-action-home {min-height: 260px; padding: 0 20px; display: flex; align-items: center; background-size: cover; background-position: center center;} .call-to-action-home .container {width: 100%;} .call-to-action-home h3 {margin: 0; font-size: 24px; line-height: 34px; text-align: center;} /*****************************************************************************/ /*** 2.6 - FAQ'S ***/ /*****************************************************************************/ .faq-blog-section.section-padding{padding: 30px 0;} .faq-blog-section.section-padding .col-lg-6.col-md-12:last-child .section-title{margin-top: 30px;} .single-blog-post .content-box h3 {font-size: 18px; line-height: 30px; margin-bottom: 6px} /*****************************************************************************/ /*** 2.7 - TESTEMUNHO CLIENTES ***/ /*****************************************************************************/ /*****************************************************************************/ /*** 2.8 - CONTATO ***/ /*****************************************************************************/ .contact-section.section-padding {padding: 30px 0;padding-top: 0px;} .contact-section .section-title {margin-bottom: 20px;} .clientes-industeck{padding:0px 0; margin-top: 30px;} /*****************************************************************************/ /*** 2.9 - NEWSLETTER ***/ /*****************************************************************************/ .subscription {padding-top: 34px; padding-bottom: 40px; margin-bottom: 30px;} .subscription h2 {font-size: 26px; line-height: 34px; margin-bottom: 20px;} .subscription input {height: 45px; line-height: 41px;} .subscription button {padding: 0 25px; line-height: 45px;} } /*****************************************************************************/ /*** ***/ /*** 3 - PARA LAYOUTS ATÉ 768px ***/ /*** ***/ /*****************************************************************************/ @media (max-width: 768px) { /*****************************************************************************/ /*** 3.1 - SLIDER ***/ /*****************************************************************************/ .rev_slider_wrapper {height: 300px;} .slide-content {padding: 0 40px 40px 40px;} .nav-btn {display: none;} .slide-content p {font-size: 14px; line-height: 1.2; margin-bottom: 5px; max-width: var( --largura_maxima_texto_slider_resp);} .caption-title {font-size: 16px;line-height: 1.2;margin-bottom: 5px; max-width: calc(var(--largura_maxima_texto_slider_resp) - 200px);} .btn {width: 100px; height: 25px; padding: 0 10px; font-size: 12px;} .bottom-mask-bar {height: 40px;padding: 0 10px;} .bottom-mask-text {font-size: 11px;letter-spacing: 0.1px;} /*****************************************************************************/ /*** 3.2 - NOSSOS SERVIÇOS ***/ /*****************************************************************************/ .nossos-servicos.section-padding{padding: 30px 0;} .nossos-servicos .servico {margin-bottom: 20px;} .nossos-servicos .col-md-4.col-sm-6:last-child .servico {margin-bottom: 0;} .nossos-servicos .servico h3{font-size: 16px;margin-top: 10px; margin-bottom: 5px;} .nossos-servicos p{ font-size: 14px; line-height: 20px;} .nossos-servicos .caption-box-wrapper{margin-top: 25px; padding-top: 15px;} .nossos-servicos .col-md-4.col-sm-6.col-xs-12 .single-our-service-caption-box {padding-top: 15px; flex-direction: column; gap: 5px;} .nossos-servicos .single-our-service-caption-box .img-box {width: 100%; max-width: none; height: 180px;} .nossos-servicos .single-our-service-caption-box .content-box {padding: 0;} .nossos-servicos .single-our-service-caption-box .content-box a h3 {font-size: 16px; line-height: 26px; margin-bottom: 0px; padding-bottom: 0px;} .nossos-servicos .single-our-service-caption-box .content-box p {font-size: 14px; line-height: 20px; margin-bottom: 0px; padding-bottom: 0px;} /*****************************************************************************/ /*** 3.3 - NOSSOS RECURSOS ***/ /*****************************************************************************/ .our-features .single-our-feature {padding: 40px 15px;} .our-features .single-our-feature .icon-box {margin-bottom: 10px;} .our-features .single-our-feature h3 {font-size: 16px; line-height: 20px; min-height: 56px; margin-bottom: 5px;} .our-features .single-our-feature p {font-size: 15px; line-height: 20px;} .our-features .single-our-feature .overlay .box .box-content a {padding: 0 40px; font-size: 13px; line-height: 40px; transform: translate3d(0, 40px, 0);} .our-features .single-our-feature .overlay .box .box-content a::before, .our-features .single-our-feature .overlay .box .box-content a::after {width: 40px; height: 100%;} .our-features .single-our-feature .overlay .box .box-content a::before {left: -15px; transform: skew(-37deg);} .our-features .single-our-feature .overlay .box .box-content a::after {right: -15px; transform: skew(37deg);} /*****************************************************************************/ /*** 3.4 - SOBRE NÓS ***/ /*****************************************************************************/ .about-section.section-padding{padding: 30px 0;} .about-section .container .team-wrapper .col-lg-3.col-md-6.col-sm-12 .membro{ width: 50%; margin: 0 auto;} .about-section .img-box img {height: 110px;} .about-text-content p {font-size: 15px; line-height: 1.8;} .team-wrapper{margin-top: 25px; padding-top: 30px;} .single-team-member .img-box {width: 100%; height: 100%;} .single-team-member .img-box img {width: 100%; height: 100%;} .single-team-member h3{font-size: 18px; margin-top: 10px; margin-bottom: 5px;} .single-team-member p {line-height: 20px;} .single-team-member p.position{margin-bottom: 5px;} .single-team-member p.info {margin-top: 5px;} .row.team-wrapper > div:nth-child(2), .row.team-wrapper > div:nth-child(3), .row.team-wrapper > div:nth-child(4) {margin-top: 20px;} /*****************************************************************************/ /*** 3.5 - ATUAÇÃO ***/ /*****************************************************************************/ .call-to-action-home {background-image: url("/img/padrao/inner-banner/banner-propaganda_red.jpg"); height: 230px; min-height: 230px; padding: 0 10px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden;} .call-to-action-home .container {width: 100%; padding: 0; margin: 0;} .call-to-action-home h3 {margin: 0; font-size: 20px; line-height: 30px; text-align: center;} /*****************************************************************************/ /*** 3.6 - FAQ's & NOTÍCIAS ***/ /*****************************************************************************/ .faq-blog-section.section-padding{padding: 30px 0;} .faq-blog-section.section-padding .col-lg-6.col-md-12:last-child .section-title{margin-top: 30px;} .single-blog-post{display: flex; flex-direction: column; width: 100%; padding: 20px; margin-bottom: 25px;} .single-blog-post .img-box{display: block; width: 100%; position: relative;} .single-blog-post .img-box img {display: block; width: 100%; height: 150px; object-fit: cover;} .single-blog-post .content-box{display: block; width: 100%; padding: 20px 0 0;} .single-blog-post .content-box h3{font-size: 16px; line-height: 24px; margin-bottom: 8px;} .single-blog-post .content-box p{font-size: 16px; line-height: 24px;} .single-blog-post .content-box ul{display: flex; align-items: center; flex-wrap: nowrap; width: 100%; margin-top: 15px;} .single-blog-post .content-box ul > li {display: block; white-space: nowrap;} .single-blog-post .content-box ul > li:last-child {padding-left: 15px; margin-left: 15px;} /*****************************************************************************/ /*** 3.7 - TESTEMUNHO CLIENTES ***/ /*****************************************************************************/ .testimonials-section .testimonials-header {margin-bottom: 30px;} .testimonials-section .testimonials-header .section-title {margin-right: 5px;} .testimonials-section .section-title h2::after {display: none;} .testimonials-section .testimonials-navigation {gap: 5px;} .testimonials-section .testimonials-navigation button {width: 32px; height: 32px;} .testimonials-section .testimonial-page {flex-direction: column; width: 100%;} .testimonials-section .testimonial-page .testimonial-item {flex: 0 0 auto; width: 100%; max-width: 100%; padding: 0 5px 25px 5px;} .testimonials-section .single-testimonial .review-text {height: 142px; min-height: 142px; padding: 20px; margin-bottom: 30px;} .testimonials-section .single-testimonial .review-text p {max-height: 102px; font-size: 16px;line-height: 26px;} .testimonials-section .single-testimonial .testimonial-info {height: 65px; min-height: 65px; gap: 15px;} .testimonials-section .single-testimonial .testimonial-info .img-box, .testimonials-section .single-testimonial .testimonial-info .img-box img {width: 65px; height: 65px;} .testimonials-section .single-testimonial .testimonial-info .content-box h3 {font-size: 14px; line-height: 20px;} .testimonials-section .single-testimonial .testimonial-info .content-box h3 .name {font-size: 16px;} .contact-section.section-padding {padding: 30px 0;padding-top: 0px;} .contact-section .section-title {margin-bottom: 20px;} .clientes-industeck{padding:0px 0; margin-top: 30px;} /*****************************************************************************/ /*** 3.8 - NEWSLETTER ***/ /*****************************************************************************/ .subscription {padding-top: 34px; padding-bottom: 40px; margin-bottom: 30px;} .subscription h2 {font-size: 20px; line-height: 30px; margin-bottom: 20px;} .subscription input {height: 45px; line-height: 41px;} .subscription button {padding: 0 15px; line-height: 40px; margin-bottom: 0px;} .subscription ul.social li {margin-left: 10px;} } /*****************************************************************************/ /*** ***/ /*** 4 - EFEITOS DE HOVER DOS CARDS DA SEÇÃO ***/ /*** ***/ /*****************************************************************************/ @media (hover: hover) and (pointer: fine) { .our-features .single-our-feature:hover .icon-box { transform: translate3d(0, -20px, 0); } .our-features .single-our-feature:hover h3, .our-features .single-our-feature:hover p { transform: translate3d(0, -20px, 0); } .our-features .single-our-feature:hover .overlay { opacity: 1; } .our-features .single-our-feature:hover .overlay .box .box-content a { transform: translate3d(0, 0, 0); } }