/*----------------------------------
Common HTML elements and more for easier usage
------------------------------------*/
html {
overflow-x: hidden;
}
html, html a, body {
-webkit-font-smoothing: antialiased;
}
html {
font-size: 16px;
-webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
text-transform: capitalize;
}
body {
font-size: 1rem;
font-family: Inter,sans-serif;
color: #222324;
line-height: 1.6;
background-color: #fff;
}
h1, h2, h3, h4, h5, h6,
.g-font-size-22--xs,
.g-font-size-32--xs,
.g-font-size-36--md,
.g-font-size-45--sm,
.g-font-size-55--md,
.g-font-size-60--md {
text-transform: capitalize;
}
/* Opcional: corrige também onde o texto aparece forçado em caixa alta via classes */
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
font-family: clash-display, sans-serif;
line-height: 1.2;
color: #242424;
margin-top: 0;
margin-bottom: .5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: capitalize;
margin-bottom: 0.75rem;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: #242424;
transition-duration: 200ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
h1 a:focus, h1 a:hover,
h2 a:focus,
h2 a:hover,
h3 a:focus,
h3 a:hover,
h4 a:focus,
h4 a:hover,
h5 a:focus,
h5 a:hover,
h6 a:focus,
h6 a:hover {
color: #6dcb2f;
transition-duration: 200ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
}
h6 {
font-size: 1rem;
}
em,
li {
font-size: 1rem;
font-weight: 300;
color: #242424;
}
em > a,
li > a {
color: #242424;
}
em > a:hover,
li > a:hover {
color: #6dcb2f;
}
small {
color: #656565;
}
label {
font-size: 0.8125rem;
font-weight: 700;
color: #242424;
margin-bottom: .25rem;
}
i {
line-height: 1;
}
/* Paragraph */
p {
font-size: 0.9375rem;
font-weight: 300;
color: #656565;
line-height: 1.6;
margin-top: 0;
margin-bottom: 1rem;
}
/* Links */
a {
color: #6dcb2f;
text-decoration: none;
}
a:focus, a:hover {
color: #5ab126;
text-decoration: none;
}
a:focus {
outline: none;
}
/*----------------------------------
Selection
------------------------------------*/
::selection {
color: #fff;
background: #6dcb2f;
text-shadow: none;
}
::-webkit-selection {
color: #fff;
background: #6dcb2f;
text-shadow: none;
}
:active,
:focus {
outline: none;
}
/*----------------------------------
Button
------------------------------------*/
.s-btn {
display: inline-block;
text-align: center;
vertical-align: middle;
border: none;
white-space: nowrap;
touch-action: manipulation;
cursor: pointer;
user-select: none;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-btn:focus, .s-btn:hover {
text-decoration: none;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-btn.focus {
text-decoration: none;
}
.s-btn:active, .s-btn.active {
background-image: none;
outline: 0;
}
.s-btn.disabled, .s-btn:disabled,
fieldset[disabled] .s-btn {
cursor: not-allowed;
opacity: .65;
}
.s-btn__element--left, .s-btn__element--right {
display: table-cell;
vertical-align: middle;
text-align: left;
}
/* Sizes
------------------------------ */
.s-btn--xs {
font-size: 0.75rem;
font-weight: 400;
padding: 0.5rem 1.25rem;
}
.s-btn--sm {
font-size: 0.875rem;
font-weight: 400;
padding: 0.75rem 1.25rem;
}
.s-btn--md {
font-size: 0.8125rem;
font-weight: 400;
padding: 1rem 2.5rem;
}
.s-btn-icon--md {
font-size: 1rem;
padding: 0.9375rem 1.5625rem 0.75rem;
}
/* Styles
------------------------------ */
.s-btn--white-brd {
color: #fff;
background: transparent;
border-width: 0.0625rem;
border-style: solid;
border-color: #fff;
}
.s-btn--white-brd:focus, .s-btn--white-brd:hover {
color: #222324;
background: #fff;
border-color: #fff;
}
.s-btn--white-bg {
color: #222324;
background: #fff;
}
.s-btn--white-bg:focus, .s-btn--white-bg:hover {
color: #6dcb2f;
background: #fff;
}
.s-btn--dark-bg {
color: #fff;
background: #222324;
border-width: 0.0625rem;
border-style: solid;
border-color: #222324;
}
.s-btn--dark-bg:focus, .s-btn--dark-bg:hover {
color: #fff;
background: #6dcb2f;
border-color: #6dcb2f;
}
.s-btn--dark-brd {
color: #222324;
background: transparent;
border-width: 0.0625rem;
border-style: solid;
border-color: #222324;
}
.s-btn--dark-brd:focus, .s-btn--dark-brd:hover {
color: #fff;
background: #222324;
border-color: #222324;
}
.s-btn--primary-bg {
color: #fff;
background: #6dcb2f;
border-width: 0.0625rem;
border-style: solid;
border-color: #6dcb2f;
}
.s-btn--primary-bg:focus, .s-btn--primary-bg:hover {
color: #fff;
background: #6dcb2f;
border-color: #6dcb2f;
}
.s-btn--primary-brd {
color: #6dcb2f;
background: transparent;
border-width: 0.0625rem;
border-style: solid;
border-color: #6dcb2f;
}
.s-btn--primary-brd:focus, .s-btn--primary-brd:hover {
color: #fff;
background: #6dcb2f;
border-color: #6dcb2f;
}
.s-btn-icon--white-brd {
border-left: none;
}
.s-btn-icon--dark-brd {
border-left: none;
}
/*----------------------------------
Clients v1
------------------------------------*/
.s-clients-v1 {
display: block;
width: 6.25rem;
height: auto;
margin: 0 auto;
opacity: 1;
cursor: pointer;
transition-duration: 200ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-clients-v1:hover {
opacity: .8;
transition-duration: 200ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
/*----------------------------------
FAQ
------------------------------------*/
.s-faq__pseudo {
position: relative;
}
.s-faq__pseudo:before {
position: absolute;
left: 12.5rem;
bottom: -1rem;
z-index: -1;
font-size: 9.375rem;
font-family: Playfair Display, serif;
color: rgba(245, 248, 249, 0.8);
content: "\0026";
}
.s-faq-grid__divider {
display: inline-block;
border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.3);
margin: .3125rem 0;
}
.s-faq-grid__title {
font-size: 1rem;
color: #fff;
margin: .3125rem 0 0 .5rem;
}
.s-faq .cbp-caption {
border-bottom: none;
}
service Start
--*/
#service {
text-align: center;
padding: 90px 0;
}
#service .service-item {
padding-bottom: 30px;
}
#service .service-item i {
font-size: 60px;
color: #4A4656;
}
#service .service-item h4 {
padding-top: 20px;
margin: 0;
color: #666;
}
#service .service-item p {
color: #888;
padding-top: 10px;
margin: 0;
font-size: 14px;
line-height: 1.8;
}
/*--
call-to-action Start
/*----------------------------------
Form Input
------------------------------------*/
/* Form Input v1 */
.s-form-v1__input {
height: 3.375rem;
color: #fff;
font-size: 0.875rem;
font-weight: 300;
background: transparent;
border-color: #fff;
border-right: none;
box-shadow: none;
letter-spacing: .1rem;
padding: .625rem 2.5rem;
}
.s-form-v1__input::-webkit-input-placeholder {
color: #fff;
}
.s-form-v1__input::-moz-placeholder {
color: #fff;
}
.s-form-v1__input:-ms-input-placeholder {
color: #fff;
}
.s-form-v1__input::placeholder {
color: #fff;
}
.s-form-v1__input:focus {
box-shadow: none;
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
}
/* Form Input v2 */
.s-form-v2__input {
height: 3.5rem;
font-size: 0.875rem;
font-weight: 300;
color: #656565;
border: none;
box-shadow: none;
letter-spacing: .1rem;
padding: .625rem 1.25rem;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-form-v2__input::-webkit-input-placeholder {
color: #656565;
}
.s-form-v2__input::-moz-placeholder {
color: #656565;
}
.s-form-v2__input:-ms-input-placeholder {
color: #656565;
}
.s-form-v2__input::placeholder {
color: #656565;
}
.s-form-v2__input:focus {
font-weight: 400;
color: #656565;
box-shadow: none;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-form-v2__input:focus::-webkit-input-placeholder {
color: #656565;
}
.s-form-v2__input:focus::-moz-placeholder {
color: #656565;
}
.s-form-v2__input:focus:-ms-input-placeholder {
color: #656565;
}
.s-form-v2__input:focus::placeholder {
color: #656565;
}
/* Form Input v3 */
.s-form-v3__input {
position: relative;
height: 3.125rem;
font-size: 0.8125rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
border: none;
border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.5);
background: transparent;
box-shadow: none;
border-radius: 0;
letter-spacing: .1rem;
padding: 0 1.25rem 0 0;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-form-v3__input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.s-form-v3__input::-moz-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.s-form-v3__input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.7);
}
.s-form-v3__input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.s-form-v3__input:focus {
color: #fff;
border-color: rgba(255, 255, 255, 0.99);
box-shadow: none;
}
.s-form-v3__input:focus::-webkit-input-placeholder {
color: #fff;
}
.s-form-v3__input:focus::-moz-placeholder {
color: #fff;
}
.s-form-v3__input:focus:-ms-input-placeholder {
color: #fff;
}
.s-form-v3__input:focus::placeholder {
color: #fff;
}
/* Form Input v4 */
.s-form-v4__input {
position: relative;
height: 3.125rem;
font-size: 0.8125rem;
font-weight: 400;
color: rgba(34, 35, 36, 0.5);
border: none;
border-bottom: .0625rem solid;
background: rgba(34, 35, 36, 0.3);
background: transparent;
box-shadow: none;
border-radius: 0;
letter-spacing: .1rem;
padding: 0 1.25rem .3125rem 1rem;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-form-v4__input::-webkit-input-placeholder {
color: rgba(34, 35, 36, 0.5);
}
.s-form-v4__input::-moz-placeholder {
color: rgba(34, 35, 36, 0.5);
}
.s-form-v4__input:-ms-input-placeholder {
color: rgba(34, 35, 36, 0.5);
}
.s-form-v4__input::placeholder {
color: rgba(34, 35, 36, 0.5);
}
.s-form-v4__input:focus {
color: #222324;
border-color: #222324;
box-shadow: none;
}
.s-form-v4__input:focus::-webkit-input-placeholder {
color: #222324;
}
.s-form-v4__input:focus::-moz-placeholder {
color: #222324;
}
.s-form-v4__input:focus:-ms-input-placeholder {
color: #222324;
}
.s-form-v4__input:focus::placeholder {
color: #222324;
}
.s-form-v4__icon {
font-size: 1.125rem;
color: rgba(34, 35, 36, 0.7);
border-bottom: 0.0625rem solid #222324;
padding: 0 .75rem .95rem;
}
/* Form Input v5 */
.s-form-v5__input {
height: 3.375rem;
color: #656565;
font-size: 0.875rem;
font-weight: 300;
background: transparent;
border-color: #222324;
border-right: none;
box-shadow: none;
letter-spacing: .1rem;
padding: .625rem 2.5rem;
}
.s-form-v5__input::-webkit-input-placeholder {
color: #656565;
}
.s-form-v5__input::-moz-placeholder {
color: #656565;
}
.s-form-v5__input:-ms-input-placeholder {
color: #656565;
}
.s-form-v5__input::placeholder {
color: #656565;
}
.s-form-v5__input:focus {
color: #222324;
box-shadow: none;
border-color: #222324;
}
.s-form-v5__input:focus::-webkit-input-placeholder {
color: #222324;
}
.s-form-v5__input:focus::-moz-placeholder {
color: #222324;
}
.s-form-v5__input:focus:-ms-input-placeholder {
color: #222324;
}
.s-form-v5__input:focus::placeholder {
color: #222324;
}
/*----------------------------------
Icons
------------------------------------*/
.s-icon {
display: inline-block;
text-align: center;
vertical-align: middle;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-icon:focus, .s-icon:hover {
text-decoration: none;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
/* Sizes
------------------------------ */
.s-icon--sm {
width: 2.5rem;
height: 2.5rem;
font-size: 0.8125rem;
padding: 0.6875rem;
}
.s-icon--md {
width: 3.125rem;
height: 3.125rem;
font-size: 1.125rem;
padding: 0.75rem;
}
.s-icon--lg {
width: 3.5rem;
height: 3.5rem;
font-size: 1.625rem;
padding: 0.5625rem 1rem;
}
/* Styles
------------------------------ */
.s-icon--white-brd {
color: #fff;
background: transparent;
border-width: 0.0625rem;
border-style: solid;
border-color: #fff;
line-height: 1.4;
}
.s-icon--white-brd:focus, .s-icon--white-brd:hover {
color: #fff;
background: #6dcb2f;
border-color: #6dcb2f;
}
.s-icon--white-bg {
color: #222324;
background: #fff;
border-width: 0.0625rem;
border-style: solid;
border-color: #fff;
line-height: 1.4;
}
.s-icon--white-bg:focus, .s-icon--white-bg:hover {
color: #6dcb2f;
background: #fff;
border-color: #fff;
}
.s-icon--primary-brd {
color: #6dcb2f;
background: transparent;
border-width: 0.0625rem;
border-style: solid;
border-color: #6dcb2f;
line-height: 1.4;
}
.s-icon--primary-brd:focus, .s-icon--primary-brd:hover {
color: #fff;
background: #6dcb2f;
border-color: #6dcb2f;
}
.s-icon--primary-bg {
color: #fff;
background: #6dcb2f;
line-height: 1.6;
}
/*----------------------------------
Promo Block
------------------------------------*/
/* Promo Block v1 */
.s-promo-block-v1__square-effect {
position: relative;
}
.s-promo-block-v1__square-effect:before {
position: absolute;
top: -5rem;
left: -1.875rem;
width: 18.75rem;
height: 10.9375rem;
border: .625rem solid;
border-color: rgba(255, 255, 255, 0.2);
content: " ";
}
.s-promo-block-v1__square-effect:after {
position: absolute;
right: 0;
bottom: -2rem;
width: 9.375rem;
height: 9.375rem;
border: .625rem solid;
z-index: -1;
border-color: rgba(108, 184, 237, 0.9);
content: " ";
}
/* Promo Block v2 */
.s-promo-block-v2 {
position: relative;
z-index: 1;
}
.s-promo-block-v2:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: linear-gradient(145deg, rgba(152, 119, 234, 0.7) -25%, #6dcb2f 100%);
background-repeat: repeat-x;
content: " ";
}
.s-promo-block-v2__form {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
@media (max-width: 61.9em) {
.s-promo-block-v2__form {
position: static;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* Promo Block v3 */
.s-promo-block-v3__divider {
position: relative;
padding-bottom: 1.875rem;
}
.s-promo-block-v3__divider:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 0.1875rem;
background-image: linear-gradient(145deg, rgba(152, 119, 234, 0.9) -25%, #6dcb2f 100%);
background-repeat: repeat-x;
content: " ";
}
.s-promo-block-v3__date {
line-height: .8;
margin-right: 1rem;
}
.s-promo-block-v3__month, .s-promo-block-v3__year {
display: block;
line-height: 1.3;
}
.s-promo-block-v3__month {
vertical-align: top;
}
/* Promo Block v4 */
.s-promo-block-v4 {
position: relative;
z-index: 1;
}
.s-promo-block-v4:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, rgba(34, 35, 36, 0.3) 0%, rgba(109, 203, 47, 0.6) 100%);
background-repeat: repeat-x;
content: " ";
}
/* Promo Block v5 */
.s-promo-block-v5 {
position: relative;
z-index: 1;
}
.s-promo-block-v5:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, rgba(109, 203, 47, 0.93) 0%, rgba(109, 203, 47, 0.93) 100%);
background-repeat: repeat-x;
content: " ";
}
/* Promo Block v6 */
.s-promo-block-v6 {
position: relative;
z-index: 1;
}
.s-promo-block-v6:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, rgba(109, 203, 47, 0.1) 0%, #6dcb2f 80%);
background-repeat: repeat-x;
content: " ";
}
/* Promo Block v7 */
.s-promo-block-v7 {
position: relative;
z-index: 1;
}
.s-promo-block-v7:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: linear-gradient(145deg, rgba(109, 203, 47, 0.97) 0%, rgba(152, 119, 234, 0.97) 100%);
background-repeat: repeat-x;
content: " ";
}
/*----------------------------------
Mockup
------------------------------------*/
/* Mockup v1 */
.s-mockup-v1 {
position: relative;
width: 55rem;
height: auto;
z-index: 1;
}
@media (max-width: 61.9em) {
.s-mockup-v1 {
width: 100%;
height: auto;
}
}
/* Mockup v2 */
.s-mockup-v2 {
position: absolute;
left: 6.25rem;
bottom: 6.25rem;
width: 25rem;
height: auto;
}
@media (max-width: 33.9em) {
.s-mockup-v2 {
display: none;
}
}
@media (min-width: 34em) {
.s-mockup-v2 {
position: absolute;
left: 0.625rem;
bottom: 0.625rem;
width: 18.75rem;
height: auto;
}
}
@media (min-width: 48em) {
.s-mockup-v2 {
position: absolute;
left: 5rem;
bottom: 5rem;
width: 18.75rem;
height: auto;
}
}
/*----------------------------------
Plan
------------------------------------*/
/* Plan v1 */
.s-plan-v1 {
box-shadow: 0.625rem 0.625rem 0.9375rem 0 rgba(31, 31, 31, 0.075);
}
.s-plan-v1__price-mark, .s-plan-v1__price-tag {
color: #6dcb2f;
}
.s-plan-v1__price-mark {
font-size: 1.375rem;
vertical-align: top;
}
.s-plan-v1__price-tag {
font-size: 1.875rem;
line-height: 1.1;
}
/* Plan v2 */
@media (min-width: 62em) {
.s-plan-v2__main {
position: relative;
z-index: 1;
box-shadow: 0 -1.25rem 3.125rem 0 rgba(34, 35, 36, 0.05);
margin-top: -.4375rem;
}
}
/*----------------------------------
Process v1
------------------------------------*/
.s-process-v1 {
position: relative;
}
.s-process-v1:before {
position: absolute;
top: 3.125rem;
left: 60%;
width: 80%;
height: 0.0625rem;
background: rgba(255, 255, 255, 0.2);
content: " ";
margin-top: -.03125rem;
}
@media (max-width: 47.9em) {
.s-process-v1:before {
display: none;
}
}
.s-process-v1:last-child:before {
display: none;
}
/*----------------------------------
Scroll To Section
------------------------------------*/
/* Scroll To Section v1 */
.s-scroll-to-section-v1--bc {
position: absolute;
left: 50%;
bottom: 0.625rem;
z-index: 1;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
text-align: center;
}
/*----------------------------------
Team v1
------------------------------------*/
.s-team-v1 {
position: relative;
cursor: pointer;
}
.s-team-v1:before {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: " ";
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-team-v1:hover:before {
box-shadow: 0 0 1.25rem 0.3125rem rgba(34, 35, 36, 0.07);
}
/*----------------------------------
Video
------------------------------------*/
.s-video__bg {
position: relative;
}
.s-video__bg:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: linear-gradient(145deg, rgba(109, 203, 47, 0.8) 0, rgba(152, 119, 234, 0.8) 100%);
background-repeat: repeat-x;
content: " ";
}
/* Video v2 */
.s-video-v2__bg {
position: relative;
}
.s-video-v2__bg:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(34, 35, 36, 0.85);
content: " ";
}
/*----------------------------------
Header
------------------------------------*/
.s-header__navbar {
background: transparent;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
/* Container
------------------------------ */
.s-header__container {
width: 100%;
height: auto;
display: table;
padding: .75rem 1.875rem;
}
.s-header__container:before, .s-header__container:after {
content: " ";
display: table;
}
.s-header__container:after {
clear: both;
}
.container-fluid {
padding-left: 2.1875rem;
padding-right: 2.1875rem;
}
/* Navbar Row
------------------------------ */
.s-header__navbar-row {
position: relative;
display: table-row;
clear: both;
}
.s-header__navbar-row-col {
width: 50%;
display: table-cell;
vertical-align: middle;
}
/* Logo
------------------------------ */
.s-header__logo {
position: relative;
z-index: 9999;
width: 100%;
height: auto;
float: left;
}
.s-header__logo-link {
display: inline-block;
padding: 1rem 0;
}
.s-header__logo-link:focus, .s-header__logo-link:hover {
text-decoration: none;
}
.s-header__logo-img-default, .s-header__logo-img-shrink {
display: block;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header__logo-img-default {
opacity: 1;
}
.s-header__logo-img-shrink {
position: absolute;
top: 1rem;
left: 0;
opacity: 0;
}
@media (max-width: 61.9em) {
.s-header__logo {
width: auto;
height: auto;
float: left;
}
}
/* Trigger
------------------------------ */
.s-header__trigger {
position: relative;
z-index: 9999;
width: 3.125rem;
height: 3.125rem;
float: right;
overflow: hidden;
transition-duration: 500ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
/* Trigger Icon */
.s-header__trigger-icon {
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
width: 1.375rem;
height: 0.0625rem;
background: #fff;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
transition-duration: 500ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header__trigger-icon:before, .s-header__trigger-icon:after {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: inherit;
content: " ";
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: transform 0.5s, width 0.5s, top 0.3s;
transition: transform 0.5s, width 0.5s, top 0.3s;
}
.s-header__trigger-icon:before {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: translate3d(0, 0.4375rem, 0);
transform: translate3d(0, 0.4375rem, 0);
}
.s-header__trigger-icon:after {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: translate3d(0, -0.4375rem, 0);
transform: translate3d(0, -0.4375rem, 0);
}
.s-header__trigger--dark .s-header__trigger-icon {
background: #222324;
}
.s-header__trigger svg {
position: absolute;
top: 0;
left: 0;
}
.s-header__trigger circle {
-webkit-transition: stroke-dashoffset 0.4s 0s;
transition: stroke-dashoffset 0.4s 0s;
}
/* Trigger Is Active Style */
.-is-active.s-header__trigger {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.-is-active .s-header__trigger-icon {
background: #fff;
}
.-is-active .s-header__trigger-icon:before, .-is-active .s-header__trigger-icon:after {
width: 50%;
-webkit-transition: transform 0.5s, width 0.5s;
transition: transform 0.5s, width 0.5s;
}
.-is-active .s-header__trigger-icon:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.-is-active .s-header__trigger-icon:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.-is-active.s-header__trigger circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.4s 0.3s;
transition: stroke-dashoffset 0.4s 0.3s;
}
/* Overlay
------------------------------ */
.s-header-bg-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(34, 35, 36, 0);
visibility: hidden;
-webkit-transition: all 1s ease-in 0.4s;
transition: all 1s ease-in 0.4s;
}
.s-header-bg-overlay.-is-open {
background: rgba(34, 35, 36, 0.99);
visibility: visible;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/* Nav
------------------------------ */
.s-header__nav {
height: 100%;
padding: 7.5rem 0;
}
/* Menu List */
.s-header__nav-menu {
width: 18.75rem;
float: right;
text-align: right;
margin-bottom: 0;
}
@media (max-width: 47.9em) {
.s-header__nav-menu {
width: 50%;
}
}
@media (max-width: 33.9em) {
.s-header__nav-menu {
width: 100%;
float: none;
}
}
.s-header__nav-menu-item {
padding: 0 0 0 5.625rem;
margin-bottom: .3125rem;
}
@media (max-width: 47.9em) {
.s-header__nav-menu-item {
padding-left: 0;
}
}
.s-header__nav-menu-link {
display: inline-block;
font-size: 1.25rem;
font-weight: 300;
color: #fff;
opacity: .85;
padding: .3125rem;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header__nav-menu-link-divider {
position: relative;
}
.s-header__nav-menu-link-divider:before {
position: absolute;
top: 50%;
right: -2.5rem;
width: 2.1875rem;
height: 0.0625rem;
background: rgba(255, 255, 255, 0);
content: " ";
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header__nav-menu-link-divider[href]:focus, .s-header__nav-menu-link-divider[href]:hover {
color: #fff;
}
.s-header__nav-menu-link-divider[href]:hover:before {
right: 0;
background: white;
}
.s-header__nav-menu-link-divider:focus, .s-header__nav-menu-link-divider:hover {
color: #fff;
}
.s-header__nav-menu-link-divider:hover {
opacity: 1;
padding-right: 2.5rem;
}
.s-header__nav-menu-link-divider.-is-active {
padding-right: 2.5rem;
}
.s-header__nav-menu-link-divider.-is-active:before {
right: 0;
background: white;
}
/* Action
------------------------------ */
.s-header__action {
margin-bottom: 0;
}
.s-header__action--lb {
position: absolute;
left: 1.875rem;
bottom: 1.875rem;
}
.s-header__action--rb {
position: absolute;
right: 1.875rem;
bottom: 1.875rem;
}
.s-header__action-item {
padding: 0;
margin-left: .1875rem;
margin-right: .3125rem;
}
.s-header__action-link {
position: relative;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
padding: .3125rem;
}
.s-header__action-link:first-child {
padding-left: 0;
}
.s-header__action-link:last-child {
padding-right: 0;
}
.s-header__action-link:hover {
color: rgba(255, 255, 255, 0.7);
}
.s-header__action-link.-is-active {
color: white;
}
/* Menu Open/Close
------------------------------ */
.s-header-bg-overlay .s-header__nav-menu-item {
opacity: 0;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
-webkit-transform: translate3d(0, 1.25rem, 0);
transform: translate3d(0, 1.25rem, 0);
}
.s-header-bg-overlay .s-header__action-item {
opacity: 0;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
@media (max-width: 47.9em) {
.s-header-bg-overlay.-is-open .s-header__nav-menu-item,
.s-header-bg-overlay.-is-open .s-header__action-item {
opacity: 1;
}
}
@media (min-width: 34em) {
.s-header-bg-overlay.-is-open .s-header__nav-menu-item {
opacity: 1;
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(1) {
-webkit-transition: all 0.4s 0.2s ease-out;
transition: all 0.4s 0.2s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(2) {
-webkit-transition: all 0.4s 0.4s ease-out;
transition: all 0.4s 0.4s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(3) {
-webkit-transition: all 0.4s 0.6s ease-out;
transition: all 0.4s 0.6s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(4) {
-webkit-transition: all 0.4s 0.8s ease-out;
transition: all 0.4s 0.8s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(5) {
-webkit-transition: all 0.4s 1s ease-out;
transition: all 0.4s 1s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(6) {
-webkit-transition: all 0.4s 1.2s ease-out;
transition: all 0.4s 1.2s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(7) {
-webkit-transition: all 0.4s 1.4s ease-out;
transition: all 0.4s 1.4s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(8) {
-webkit-transition: all 0.4s 1.6s ease-out;
transition: all 0.4s 1.6s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(9) {
-webkit-transition: all 0.4s 1.8s ease-out;
transition: all 0.4s 1.8s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__nav-menu-item:nth-child(10) {
-webkit-transition: all 0.4s 2s ease-out;
transition: all 0.4s 2s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header-bg-overlay.-is-open .s-header__action-item {
opacity: 1;
}
.s-header-bg-overlay.-is-open .s-header__action-item:nth-child(1) {
-webkit-transition: all 0.4s 0.4s ease-out;
transition: all 0.4s 0.4s ease-out;
}
.s-header-bg-overlay.-is-open .s-header__action-item:nth-child(2) {
-webkit-transition: all 0.4s 0.8s ease-out;
transition: all 0.4s 0.8s ease-out;
}
.s-header-bg-overlay.-is-open .s-header__action-item:nth-child(3) {
-webkit-transition: all 0.4s 1.2s ease-out;
transition: all 0.4s 1.2s ease-out;
}
}
/* Shrink
------------------------------ */
/* Navbar */
.s-header__shrink .s-header__navbar {
box-shadow: 0 0 0.9375rem 0 rgba(34, 35, 36, 0.05);
}
.s-header__shrink.-is-open .s-header__navbar {
background: transparent;
}
/* Logo */
.s-header__shrink.-is-open .s-header__logo-img-default {
opacity: 1;
}
.s-header__shrink.-is-open .s-header__logo-img-shrink {
opacity: 0;
}
.s-header__shrink .s-header__navbar {
background: #fff;
}
.s-header__shrink .s-header__logo-img-default {
opacity: 0;
}
.s-header__shrink .s-header__logo-img-shrink {
opacity: 1;
}
/* Trigger Icon */
.s-header__shrink.-is-open .s-header__trigger-icon {
background: #fff;
}
.s-header__shrink .s-header__trigger-icon {
background: #222324;
}
/*----------------------------------
Header v2
------------------------------------*/
/* Navbar
------------------------------ */
.s-header-v2__navbar {
position: relative;
z-index: 1000;
min-height: 3.125rem;
border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.3);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header-v2__navbar:before, .s-header-v2__navbar:after {
content: " ";
display: table;
}
.s-header-v2__navbar:after {
clear: both;
}
@media (max-width: 61.9em) {
.s-header-v2__navbar {
background: #fff;
box-shadow: 0 0 0.9375rem 0.25rem rgba(34, 35, 36, 0.05);
}
}
/* Navbar Row
------------------------------ */
.s-header-v2__navbar-row {
display: table-row;
clear: both;
}
@media (max-width: 61.9em) {
.s-header-v2__navbar-row {
display: inherit;
}
}
/* Columns */
.s-header-v2__navbar-col {
display: table-cell;
vertical-align: middle;
}
@media (max-width: 61.9em) {
.s-header-v2__navbar-col {
display: block;
}
}
/* Space */
.s-header-v2__navbar-col-width--180 {
width: 11.250rem;
}
@media (max-width: 61.9em) {
.s-header-v2__navbar-col-width--180 {
width: auto;
}
}
/* Variations */
@media (min-width: 62em) {
.s-header-v2__navbar-col--left {
float: left;
}
.s-header-v2__navbar-col--left .dropdown__mega-menu {
right: auto;
left: 10rem;
}
}
@media (min-width: 62em) {
.s-header-v2__navbar-col--right {
float: right;
}
}
/* Navbar Toggle
------------------------------ */
.s-header-v2__toggle {
position: relative;
display: none;
float: right;
background: transparent;
border: none;
outline: none;
line-height: 4.3rem;
padding: .5625rem .3125rem .5625rem .625rem;
margin: 0;
}
.s-header-v2__toggle-icon-bar {
position: relative;
width: 1.315rem;
height: 0.0625rem;
display: inline-block;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header-v2__toggle-icon-bar, .s-header-v2__toggle-icon-bar:before, .s-header-v2__toggle-icon-bar:after {
background: #222324;
}
.s-header-v2__toggle-icon-bar:before, .s-header-v2__toggle-icon-bar:after {
position: absolute;
left: 0;
content: " ";
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header-v2__toggle-icon-bar:before {
width: 0.625rem;
height: 0.0625rem;
bottom: .625rem;
}
.s-header-v2__toggle-icon-bar:after {
width: 1rem;
height: 0.0625rem;
top: -.3125rem;
}
.s-header-v2__toggle:hover .s-header-v2__toggle-icon-bar:before, .s-header-v2__toggle:hover .s-header-v2__toggle-icon-bar:after {
width: 1.315rem;
height: 0.0625rem;
}
@media (max-width: 61.9em) {
.s-header-v2__toggle {
display: block;
}
}
/* Logo
------------------------------ */
.s-header-v2__logo {
width: 100%;
height: auto;
float: left;
}
.s-header-v2__logo-link {
display: inline-block;
padding: 1rem 1.25rem 1rem 0;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header-v2__logo-link:focus, .s-header-v2__logo-link:hover {
text-decoration: none;
}
.s-header-v2__logo-img {
display: inline-block;
}
.s-header-v2__logo-img--default {
display: block;
}
@media (max-width: 61.9em) {
.s-header-v2__logo-img--default {
display: none;
}
}
.s-header-v2__logo-img--shrink {
display: none;
}
@media (max-width: 61.9em) {
.s-header-v2__logo-img--shrink {
display: block;
}
}
@media (max-width: 61.9em) {
.s-header-v2__logo {
width: auto;
height: auto;
float: left;
}
.s-header-v2__logo-link {
padding-left: .875rem;
padding-right: .625rem;
}
}
/* Collapse
------------------------------ */
@media (max-width: 61.9em) {
.s-header-v2__navbar-collapse {
width: 100%;
padding: 0 .9375rem !important;
}
}
@media (max-width: 61.9em) {
.s-header-v2__navbar-collapse.collapse {
display: none !important;
}
.s-header-v2__navbar-collapse.collapse.in {
display: block !important;
max-height: 35rem;
overflow-y: auto !important;
}
}
/* Nav Menu
------------------------------ */
.s-header-v2__nav {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.s-header-v2__nav:before, .s-header-v2__nav:after {
content: " ";
display: table;
}
.s-header-v2__nav:after {
clear: both;
}
@media (max-width: 61.9em) {
.s-header-v2__nav {
background: #fff;
padding: 1.25rem 0;
}
}
.s-header-v2__nav-item {
position: relative;
display: block;
float: left;
}
.s-header-v2__nav-item:last-child .s-header-v2__nav-link {
margin-right: 0;
}
@media (max-width: 61.9em) {
.s-header-v2__nav-item {
float: none;
}
}
.s-header-v2__nav-item .dropdown-backdrop {
position: relative;
}
.s-header-v2__nav-link {
position: relative;
display: block;
font-size: 0.8125rem;
font-weight: 700;
font-family: Montserrat, sans-serif;
color: rgba(255, 255, 255, 0.75);
line-height: 5.5rem;
margin: 0 .9rem;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header-v2__nav-link:hover {
color: #fff;
}
.s-header-v2__nav-link:focus {
color: rgba(255, 255, 255, 0.75);
}
.s-header-v2__nav-link.-is-active {
color: #fff;
}
@media (max-width: 61.9em) {
.s-header-v2__nav-link {
color: rgba(34, 35, 36, 0.7);
line-height: 1.6;
margin: 1.5rem 0;
}
.s-header-v2__nav-link:focus, .s-header-v2__nav-link:hover {
color: rgba(34, 35, 36, 0.7);
}
.s-header-v2__nav-link.-is-active {
color: #6dcb2f;
}
}
/* Dropdown
------------------------------ */
.s-header-v2__dropdown-menu {
display: none;
font-size: 0.8125rem;
min-width: 13.750rem;
background: #fff;
border: none;
border-radius: 0;
box-shadow: 0 0.3125rem 0.75rem rgba(34, 35, 36, 0.05);
padding: .9375rem 0;
margin-top: 0;
}
@media (max-width: 61.9em) {
.s-header-v2__dropdown-menu {
position: static;
float: none;
box-shadow: none;
}
}
.s-header-v2__dropdown-menu:focus .s-header-v2__dropdown-menu-link, .s-header-v2__dropdown-menu:hover .s-header-v2__dropdown-menu-link {
background: transparent;
}
.s-header-v2__dropdown-menu-link {
font-size: 0.875rem;
font-weight: 400;
font-family: Lato, sans-serif;
color: rgba(34, 35, 36, 0.7) !important;
padding: .4375rem 2rem .4375rem 1.375rem !important;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-header-v2__dropdown-menu-link:hover {
color: #6dcb2f !important;
}
.s-header-v2__dropdown-menu-link.-is-active {
color: #6dcb2f !important;
}
/* Dropdown Menu Open On Hover
------------------------------ */
@media (min-width: 62em) {
.s-header-v2__dropdown-on-hover:hover > .s-header-v2__dropdown-menu {
display: block;
}
}
/* Shrink
------------------------------ */
@media (min-width: 62em) {
.s-header__shrink .s-header-v2__navbar {
background: #fff;
box-shadow: 0 0 0.9375rem 0.25rem rgba(34, 35, 36, 0.05);
}
/* Toggle */
.s-header__shrink .s-header-v2__toggle-icon-bar--white, .s-header__shrink .s-header-v2__toggle-icon-bar--white:before, .s-header__shrink .s-header-v2__toggle-icon-bar--white:after {
background: #222324;
}
/* Logo */
.s-header__shrink .s-header-v2__logo-img--default {
display: none;
}
.s-header__shrink .s-header-v2__logo-img--shrink {
display: block;
}
/* Nav Link */
.s-header__shrink .s-header-v2__nav-link {
color: rgba(34, 35, 36, 0.7);
}
.s-header__shrink .s-header-v2__nav-link:hover {
color: #6dcb2f;
}
.s-header__shrink .s-header-v2__nav-link:focus {
color: rgba(34, 35, 36, 0.7);
}
.s-header__shrink .s-header-v2__nav-link.-is-active {
color: #6dcb2f;
}
}
/*----------------------------------
Footer
------------------------------------*/
.s-footer__logo {
position: relative;
z-index: 1;
}
.s-footer__logo:before {
position: absolute;
top: 0;
left: 0.9375rem;
bottom: 0;
width: 70%;
height: auto;
z-index: -1;
background: url("../img/widgets/worldmap.png") no-repeat center center;
background-size: cover;
content: " ";
}
/*----------------------------------
Back To Top
------------------------------------*/
.s-back-to-top {
position: fixed;
right: 3.125rem;
bottom: -3.125rem;
display: block;
width: 1.875rem;
height: 3rem;
z-index: 9;
background: #6dcb2f;
border-radius: 3.125rem;
text-align: center;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-back-to-top:before {
display: block;
font-size: 0.75rem;
font-style: normal;
font-family: themify;
color: #fff;
line-height: 3rem;
content: "\e627";
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-back-to-top:hover {
background: #fff;
}
.s-back-to-top:hover:before {
color: #6dcb2f;
}
.s-back-to-top:focus, .s-back-to-top:hover {
text-decoration: none;
}
/* The button becomes visible */
.s-back-to-top.-is-visible {
bottom: 3.125rem;
opacity: .8;
}
.s-back-to-top.-is-visible:hover {
opacity: 1;
}
/* If the user keeps scrolling down, the button is out of focus and becomes less visible */
.s-back-to-top.-zoom-out {
opacity: .6;
}
/*----------------------------------
Cubeportfolio
------------------------------------*/
.s-portfolio__filter-v1-item {
font-size: 0.8125rem;
color: #656565 !important;
margin-bottom: 0 !important;
}
.s-portfolio__filter-v1-item:hover {
color: #242424 !important;
}
.s-portfolio__filter-v1-item.cbp-filter-item-active {
color: #6dcb2f !important;
}
.s-portfolio__filter-v1.cbp-l-filters-text {
margin-bottom: 0;
}
/* Image Effect
------------------------------ */
.s-portfolio__img-effect {
position: relative;
display: block;
}
.s-portfolio__img-effect:after {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(109, 203, 47, 0.95);
content: " ";
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
transition-duration: 400ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-portfolio__item:hover .s-portfolio__img-effect:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Position
------------------------------ */
.s-portfolio__caption-hover--cc {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
padding: 1.875rem;
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
transition-duration: 400ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-portfolio__item:hover .s-portfolio__caption-hover--cc {
opacity: 1;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
/* Paginations v1
------------------------------ */
.s-portfolio__paginations-v1 .cbp-nav-controls {
display: none;
}
.s-portfolio__paginations-v1 .cbp-nav-pagination {
padding-left: .625rem;
}
.s-portfolio__paginations-v1 .cbp-nav-pagination-item {
margin: 0 .9375rem;
}
.s-portfolio__paginations-v1 .cbp-nav-pagination-active {
background: #6dcb2f;
}
/* Tab v1
------------------------------ */
.s-tab__filter-v1 {
display: block;
font-size: 1.75rem;
color: #fff;
text-align: center;
border: none;
cursor: pointer;
letter-spacing: .0625rem;
line-height: 2rem;
padding: 0 0 2rem;
margin: 0 0 2rem;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-tab__filter-v1:before {
position: absolute;
left: 50%;
bottom: 0;
width: 5rem;
height: 0.0625rem;
background: rgba(255, 255, 255, 0.3);
content: " ";
margin-left: -2.5rem;
}
.s-tab__filter-v1:last-child {
padding: 0;
margin: 0;
}
.s-tab__filter-v1:last-child:before {
display: none;
}
.s-tab__filter-v1.cbp-filter-item-active {
color: #6dcb2f;
}
.s-tab__grid-v1-item {
font-size: 0.9375rem;
font-weight: 300;
color: #656565;
}
/*----------------------------------
Google Map
------------------------------------*/
/* Custom Style */
.s-google-map,
.s-google-map .s-google-container {
position: relative;
}
/* Info Window: White background and box outline */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div {
background-color: #fff !important;
box-shadow: none !important;
}
/* Info Window: Arrow colour */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div > div > div {
background-color: #fff !important;
box-shadow: none !important;
}
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div:first-child {
display: none;
}
/* Info Window: Let's remove image icon inside close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child > img {
display: none;
}
/* Info Window: New arrow style */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child {
overflow: inherit !important;
}
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child:after {
position: absolute;
top: 0;
right: 0;
font-size: 0.75rem;
font-family: themify;
color: #656565;
content: "\e646";
}
/* Info Window: Positioning of infowindow */
.gm-style-iw {
top: 1.375rem !important;
left: 1.375rem !important;
}
/*----------------------------------
Swiper
------------------------------------*/
.s-swiper {
position: relative;
width: 100%;
overflow: hidden;
}
/* Arrows v1
------------------------------ */
.s-swiper__arrow-v1--left, .s-swiper__arrow-v1--right {
position: absolute;
top: 50%;
z-index: 1;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
@media (max-width: 47.9em) {
.s-swiper__arrow-v1--left, .s-swiper__arrow-v1--right {
opacity: 0;
}
}
.s-swiper__arrow-v1--left {
left: 2rem;
}
.s-swiper__arrow-v1--right {
right: 2rem;
}
@media (max-width: 47.9em) {
.s-swiper:hover .s-swiper__arrow-v1--left, .s-swiper:hover .s-swiper__arrow-v1--right {
opacity: 1;
}
}
/* Pagination v1
------------------------------ */
.s-swiper__pagination-v1--bc {
position: absolute;
bottom: 1.875rem !important;
text-align: center;
z-index: 1;
}
.s-swiper__pagination-v1 .swiper-pagination-bullet {
width: 1rem;
height: 0.5625rem;
border-radius: 0.9375rem;
opacity: .7;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-swiper__pagination-v1 .swiper-pagination-bullet-active {
width: 1.875rem;
background: #6dcb2f;
opacity: 1;
}
.s-swiper__pagination-v1--white .swiper-pagination-bullet {
background: #fff;
}
.s-swiper__pagination-v1--white .swiper-pagination-bullet-active {
background: #6dcb2f;
}
.s-swiper__pagination-v1--dark .swiper-pagination-bullet {
background: #b2b2b2;
}
.s-swiper__pagination-v1--dark .swiper-pagination-bullet-active {
background: #6dcb2f;
}
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
left:28px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
/* box-shadow: 2px 2px 3px #999; */
z-index:100;
transition: .5s ease-in-out;
}
.float:hover{
background-color:#25d366;
color:#fff !important;
}
.my-float{
margin-top:15px;
}
/* Reforço visual para títulos e textos principais */
h1, h2, h3, h4, h5, h6,
.g-font-size-32--xs,
.g-font-size-36--md,
.g-font-size-45--sm,
.g-font-size-55--md,
.g-font-size-60--md {
font-family: 'Oxygen', sans-serif;
font-weight: 700;
text-transform: none;
}
body, p, a, span, li, input, textarea, button {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
text-transform: none;
}
.circle-text-box {
width: 280px;
height: 280px;
margin: 0 auto 40px auto;
border-radius: 50%;
background-color: #6dcb2f; /* azul SATEC */
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
font-weight: 900; /* ExtraBold */
font-size: 22px; /* aumentado */
font-family: 'Oxygen', sans-serif;
text-transform: uppercase;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
line-height: 1.3;
}
/* Botão gráfico lateral */
.graphic-button-right {
display: inline-block;
padding: 18px 40px;
background-color: #6dcb2f; /* azul SATEC */
color: white;
font-weight: 700;
font-size: 16px;
font-family: 'Oxygen', sans-serif;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.graphic-button-right:hover {
background-color: #4a9c1e; /* tom mais escuro no hover */
color: #fff;
text-decoration: none;
}
/* Botão flutuante - Solicite um Orçamento */
.floating-budget-button {
position: fixed;
top: 450px;
right: 0;
z-index: 9999;
background-color: #6dcb2f; /* verde claro LINK */
color: white;
width: 260px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
font-family: 'Oxygen', sans-serif;
text-align: center;
text-decoration: none;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.2);
line-height: 1.3;
transition: background-color 0.3s ease;
padding: 10px;
}
.floating-budget-button:hover {
background-color: #6dcb2f; /* tom escuro no hover */
color: #fff;
}
/* Cor de fundo verde LINK */
.g-bg-color--custom-blue {
background-color: #6dcb2f;
}
/* Ajustes visuais nos botões */
section.g-bg-color--custom-blue .s-btn {
font-family: 'Oxygen', sans-serif;
text-transform: uppercase;
color: #ffffff;
border-color: #ffffff;
background: transparent;
padding: 20px 30px;
white-space: normal;
width: 100%;
max-width: 360px;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
section.g-bg-color--custom-blue .s-btn:hover {
background-color: #ffffff;
color: #6dcb2f;
transition: all 0.3s ease;
}
.full-width-right-bar {
width: 100vw;
background-color: #6dcb2f;
color: white;
font-family: 'Oxygen', sans-serif;
font-weight: 900;
font-size: 20px;
text-transform: uppercase;
padding: 15px 30px;
text-align: left;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 40px 0 20px 0;
box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.2);
}
.full-width-right-bar i {
margin-right: 10px;
}
.full-width-bar {
width: 100vw;
background-color: #6dcb2f;
color: white;
padding: 60px 0;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.full-width-bar h3,
.full-width-bar p {
color: white;
font-family: 'Oxygen', sans-serif;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Imports
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,700);
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Global
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
body{
font-family: Raleway;
position: relative;
}
.top{
display: none;
background: rgb(81, 255, 182);
color: #fff;
padding: 5px 10px;
font-size: 22px;
position: fixed;
bottom: 45px;
right: 35px;
}
.show-top{
display: block;
z-index: 99;
transition: 2s;
}
.top:hover{
background: rgb(87, 160, 255);
}
h1{
font-weight: 100;
font-size: 40px;
text-transform: uppercase;
color: #fff;
letter-spacing: 10px;
}
h2{
font-weight: 100;
font-size: 40px;
text-transform: uppercase;
color: #fff;
}
ul{
list-style: none;
}
#trigger-overlay:hover, a:focus, a:hover {
color: inherit;
text-decoration: none;
transition: .8s;
}
p{
font-size: 16px;
}
.wrapper{
padding: 75px 0px;
}
.virticle-line{
height: 40px;
width: 1px;
background: #888;
margin: 15px auto 5px;
}
.circle{
height: 15px;
width: 15px;
border: 1px solid #888;
border-radius: 100%;
margin: 0px auto 50px;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Overlay style
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
background: linear-gradient(50deg, rgb(81, 255, 182), rgb(87, 160, 255));
}
.overlay .overlay-close {
width: 50px;
height: 50px;
position: absolute;
right: 110px;
top: 85px;
overflow: hidden;
border: none;
background: url(../img/cross.png) no-repeat center center;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #e3fcb1;
}
.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-hugeinc.open {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-webkit-perspective: 1200px;
perspective: 1200px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
.overlay-hugeinc.open nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.overlay-hugeinc.close nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Preloader
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#preloader {
position:fixed;
left:0;
top:0;
z-index:99999999999;
width:100%;
height:100%;
overflow:visible;
background: #fff url('../img/Intersection.gif') no-repeat center center;
background-size: 100px 100px;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Header
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
.header{
height: 100vh;
background: linear-gradient(50deg, rgb(81, 255, 182), rgb(87, 160, 255));
padding: 45px 0px;
}
#logo {
font-size: 80px;
letter-spacing: 10px;
font-weight: 100;
color: white;
display: inline-block;
padding: 0px;
float: left;
}
a#logo:hover{
text-decoration: none;
}
.strong{
font-weight: 400;
}
.header img{
width: 100%;
}
.top-bar{
width: 100%;
}
.fixed {
position: fixed;
background: rgb(87, 160, 255);
top: 0;
z-index: 99;
transition: 1s;
}
.fixed #logo{
font-size: 60px;
}
.fixed .nav-button{
margin: 15px 0px;
}
.nav-button{
max-width: 600px;
margin: 35px 0px;
}
.nav-button button{
border: none;
outline: none;
display: inline-block;
color: #fff;
border-radius: 0px;
cursor: pointer;
background-color: transparent;
float: right;
font-size: 42px;
/*border: 1px solid white;*/
padding: 0px 12px;
}
.nav-button button:hover{
color: rgb(87, 160, 255);
background-color: white;
}
.navbar-white {
background-color: #fff !important;
transition: background 0.5s ease-out;
box-shadow: 0px 0px 10px #39c;
}
.starting img{
margin-top: 110px;
}
.banner-text{
margin-top: 100px;
}
.starting p{
padding: 20px 0px;
color: #fff;
line-height: 30px;
}
.btn.btn-download {
padding: 10px;
background: white;
border-radius: 50px;
width: 180px;
text-align: left;
color: #333333;
border: 1px solid white;
margin-right: 10px;
}
.btn.btn-download:hover{
color: #fff;
background-color: transparent;
}
.btn.btn-download i {
width: 20px;
font-size: 36px;
margin-left: 10px;
margin-right: 25px;
}
.btn.btn-download strong {
font-weight: 800;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Video
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#video{
text-align: center;
color: #333;
}
#video h2{
color: #333;
}
#video p{
margin-top: 40px;
}
.video{
margin: 0 auto;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Bigfeature
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#bigfeatures li i{
color: #999;
font-size: 24px;
text-align: center;
height: 50px;
width: 50px;
border: 1px solid #999;
border-radius: 100%;
padding-top: 12px;
}
.item-list-right li {
padding:0 70px 20px 0;
position:relative;
text-align:right;
}
.item-list-right li i {
font-size:32px;
position:absolute;
right:0;
top:0;
}
.item-list-left li {
padding:0 0px 20px 60px;
position:relative;
text-align:left;
}
.item-list-left li i {
font-size:32px;
position:absolute;
left:0;
top:0;
}
.item-list-right h3,.item-list-left h3 {
margin:0 0 25px 0;
font-weight:300;
}
.item-list-left.item-list-big li {
padding:0 0px 20px 70px;
}
.item-list-big li i {
font-size:48px;
}
.item-list-right li:last-child,.item-list-left li:last-child {
padding-bottom:0;
}
#bigfeatures .screen {
width: 400px;
max-width:110%;
height:auto;
}
#bigfeatures i {
color:#41A1E1;
}
@media (max-width:1200px) and (min-width:767px) {
#bigfeatures i {
display:none;
}
.item-list-right.item-list-big li,.item-list-left.item-list-big li {
padding:0 0px 40px 0px;
}
}
@media (max-width:992px) and (min-width:767px) {
.item-list-right.item-list-big li,.item-list-left.item-list-big li {
font-size:14px;
}
.item-list-right h3,.item-list-left h3 {
font-size:22px;
}
.item-list-right li:last-child,.item-list-left li:last-child {
padding-bottom:0;
}
}
@media all and (max-width:767px) {
.item-list-right li i {
right:auto;
left:0;
}
.item-list-left li:last-child {
margin-bottom:60px;
}
}
.animation-box {
display:inline-block;
position:relative;
}
@-webkit-keyframes highlight-left {
0% {
opacity:0;
top:100%;
-webkit-transform:scale(0);
}
70% {
opacity:1;
-webkit-transform:scale(1);
}
100% {
opacity:0;
top:0;
-webkit-transform:scale(0);
}
}
@keyframes highlight-left {
0% {
opacity:0;
top:100%;
transform:scale(0);
}
70% {
opacity:1;
transform:scale(1);
}
100% {
opacity:0;
top:0;
transform:scale(0);
}
}
.highlight-left {
position:absolute;
animation:highlight-left 2s ease-in 0s infinite;
-webkit-animation:highlight-left 2s ease-in 0s infinite;
left:-5px;
margin-top:-100px;
}
@-webkit-keyframes highlight-right {
0% {
opacity:0;
top:0;
-webkit-transform:scale(0)
}
70% {
opacity:1;
-webkit-transform:scale(1)
}
100% {
opacity:0;
top:100%;
-webkit-transform:scale(0)
}
}
@keyframes highlight-right {
0% {
opacity:0;
top:0;
transform:scale(0)
}
70% {
opacity:1;
transform:scale(1)
}
100% {
opacity:0;
top:100%;
transform:scale(0)
}
}
.highlight-right {
position:absolute;
animation:highlight-right 2s ease-in 0s infinite;
-webkit-animation:highlight-right 2s ease-in 0s infinite;
right:-5px;
margin-top: -100px;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Speciality
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#speciality{
background: #eee;
text-align: center;
color: #333;
}
#speciality h2{
color: #333;
}
#speciality h3{
text-transform: uppercase;
}
.special-icon{
color: #888;
border: 1px solid #888;
border-radius: 100%;
width: 50px;
height: 50px;
padding-top: 15px;
display: inline-block;
margin: 15px 0px;
}
#speciality .container .row .col-sm-4:nth-child(2){
border-right: 1px solid #888;
border-left: 1px solid #888;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Features
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
.features-list{
margin: 20px 10px;
}
.features-list-left{
text-align: right;
margin: 20px 10px;
}
.features-list ul.right li{
padding: 10px 0px;
}
.features-list-left ul.left li{
padding: 10px 0px;
text-align: right;
}
.features-list ul.right{
padding: 40px;
margin-left: -40px;
}
.features-list-left ul.left{
padding: 40px;
margin-right: -40px;
}
.left-img{
margin-right: -15px;
}
.right-img{
margin-left: -15px;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Screenshots
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#gallery{
background: #e7e7e7;
}
#gallery h2{
display: none;
}
#gallery {
position: relative;
}
#gallery .virticle-line, #gallery .circle{
display: none;
}
#screenshots .item {
padding:0px 0px;
margin:10px;
color:#FFF;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
text-align:center;
display:block;
}
.img_res{
max-width: 200px;
}
.customNavigation {
text-align:center;
}
.customNavigation a {
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.gallery-nav {
width: 42px;
height: 42px;
background: #fff;
font-size: 28px;
line-height: 0;
border: 2px solid;
border-radius: 100%;
color: rgb(87, 160, 255);
padding: 6px 9px;
}
.gallery-nav:hover,.gallery-nav:focus,.gallery-nav:active {
color:#fff;
background: rgb(87, 160, 255);
border-color: rgb(87, 160, 255);
}
.customNavigation{
top: 40%;
position: absolute;
display: block;
width: 100%;
}
a.prev{
float: left;
margin-left: 10px;
padding-left: 6px;
}
a.next{
float: right;
margin-right: 10px;
padding-left: 12px;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Development Team
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#team{
text-align: center;
color: #333;
}
#team h2{
color: #333;
}
#team img{
width: 200px;
margin-bottom: 20px;
position: relative;
display: block;
margin: 0px auto;
}
.img-hover{
display: none;
width: 200px;
height: 213px;
position: absolute;
margin: 0px auto;
}
#team .icon-m{
position: absolute;
width: 30px;
right: 0px;
bottom: 0px;
}
#team .icon-p{
position: absolute;
width: 30px;
top: 185px;
left: 185px;
}
#team .col-md-2:hover .img-hover{
display: block;
background: rgba(0, 0, 0, .7);
top: 0;
cursor: pointer;
margin: 0px auto;
}
#team .col-md-2:hover .icon-m{
display: block;
}
ul.social-icon{
padding: 0px;
margin-top: 95px;
}
ul.social-icon li{
display: inline-block;
margin: 5px;
}
ul.social-icon i {
color:#333;
background: #fff;
border-radius:100%;
display:block;
width: 30px;
height: 30px;
padding: 8px;
}
ul.social-icon li a {
display:block;
}
.social-icon ul li a i{
color: white;
border-color: white;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Testimonial
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#testimonial{
background: linear-gradient(50deg, rgb(81, 255, 182), rgb(87, 160, 255));
color: white;
padding: 100px 0px;
/*position: relative;*/
}
#testimonial h3{
color: white;
}
#testimonial hr{
border-color: white;
}
/*.item .test-img{
width: 100px;
}*/
.owl-theme .owl-controls .owl-page span {
border: 1px solid white;
border-radius: 100%;
height: 100px;
width: 100px;
border: 1px;
padding: 0px;
margin: 0px;
background-color: #eee;
}
.owl-theme .owl-controls .owl-page{
border-radius: 100%;
border: 2px solid #fff;
margin: 10px;
/* position: absolute;
top: -25px;*/
}
.owl-theme .owl-controls .owl-page span:hover{
background-color: transparent;
}
.owl-theme .owl-controls .active span{
background-color: transparent;
}
.owl-theme .owl-controls .owl-page:nth-child(1) {
background: url(../img/test1.png) center ;
background-size: 100px 100px;
}
.owl-theme .owl-controls .owl-page:nth-child(2) {
background: url(../img/test2.png) center;
background-size: 100px 100px;
}
.owl-theme .owl-controls .owl-page:nth-child(3) {
background: url(../img/test3.png) center;
background-size: 100px 100px;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Pricing table
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#pricing{
position: relative;
height: 100%;
background: linear-gradient(50deg, rgb(81, 255, 182), rgb(87, 160, 255));
}
ul.pricing-table {
display:block;
width:100%;
}
ul.pricing-table:after {
display:block;
content:"";
clear:both;
}
ul.pricing-table>li {
display:block;
position:relative;
z-index:1;
float:left;
width:30.66666%;
background:#fff;
color:#444;
margin:0 4% 0 0;
padding:15px;
text-align:center;
}
ul.pricing-table>li:last-child {
margin-right:0;
}
ul.pricing-table .benefits-list{
padding: 0px;
}
ul.pricing-table .stamp {
position:absolute;
right:-20px;
top:60px;
height:80px;
width:80px;
padding:10px;
border-radius:50%;
overflow:hidden;
font-size:12px;
background:#fff;
border:1px solid #eee;
text-transform:uppercase;
line-height:1;
font-weight:bold;
letter-spacing:0px;
}
ul.pricing-table .stamp i {
display:block;
padding:0 0 4px 0;
font-size:27px;
}
ul.pricing-table h3 {
display:block;
padding:30px 5px 30px 5px;
margin:0;
border-radius:5px 5px 0 0;
border-bottom:2px dotted #eee;
color:#444;
}
ul.pricing-table li.silver h3 {
background:#eee;
color:#888;
border-bottom:2px dotted #eee;
}
ul.pricing-table li.silver .stamp {
color:#888;
border:1px solid #888;
}
ul.pricing-table li.gold h3 {
background:#fff29d;
color:#a98815;
border-bottom:2px dotted #fff29d;
}
ul.pricing-table li.gold .stamp {
color:#a98815;
border:1px solid #a98815;
text-align:center;
}
ul.pricing-table span {
display:block;
font-size:40px;
font-weight:bold;
color:#222;
padding:30px 0;
line-height:1.3;
}
ul.pricing-table span small {
font-size:14px;
font-weight:normal;
color:#ccc;
display:block;
line-height:1;
}
ul.pricing-table .benefits-list {
margin:0 0 30px 0;
}
ul.pricing-table .benefits-list li {
padding:5px 0;
}
ul.pricing-table .benefits-list li.not {
text-decoration:line-through;
color:#ddd;
}
ul.pricing-table a.buy {
display:block;
padding:15px;
font-size:28px;
background:#f2f2f2;
border-radius:0 0 5px 5px;
color:#444;
text-align:center;
}
ul.pricing-table a.buy:hover .ion-ios-cart-outline:before {
content: "\f3d6";
}
.bg-color-grad {
background:#00aeff;
background:-moz-linear-gradient(top,#00aeff 0%,#00e0a4 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00aeff),color-stop(100%,#00e0a4));
background:-webkit-linear-gradient(top,#00aeff 0%,#00e0a4 100%);
background:-o-linear-gradient(top,#00aeff 0%,#00e0a4 100%);
background:-ms-linear-gradient(top,#00aeff 0%,#00e0a4 100%);
background:linear-gradient(to bottom,#00aeff 0%,#00e0a4 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aeff',endColorstr='#00e0a4',GradientType=0 );
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Contact Us
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#contact{
text-align: left;
background-color: #e7e7e7;
}
#contact i {
width: 60px;
height: 100px;
border-radius: 30px;
border: 2px solid #fff;
color: #fff;
font-size: 40px;
display: inline-block;
margin-right: 20px;
margin-top: 12px;
padding: 30px 0;
text-align: center;
float: left;
}
.contact-item:hover i{
background-color:#6dcb2f;
transition: .8s;
border: 2px solid #e7e7e7 !important;
/*background: linear-gradient(90deg, rgb(81, 255, 182), rgb(87, 160, 255));*/
}
.contact{
font-size: 15px;
}
.form h3{
margin-left: 15px;
}
.form .message{
margin: 0px 15px;
height: 180px;
width: 98%;
}
.btn-sub {
width: 170px;
height: 50px;
border-radius: 0px;
color: white;
background-color: rgb(48 221 39);
padding: 15px 10px;
margin: 10px 30px;
border-color: rgb(48 221 39);
margin-bottom: 45px;
text-transform: uppercase;
font-weight: 700;
}
.btn-sub:hover{
background-color: rgb(81, 255, 182);
border-color: rgb(81, 255, 182);
color: white;
transition: .8s;
}
input[type="username"]:focus, input[type="email"]:focus, input[type="text"]:focus{
border-color: rgb(81, 255, 182);
box-shadow: none;
}
input.form-control, .message {
border-radius: 0px;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Footer Section
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#footer {
/*background: linear-gradient(180deg, rgb(0, 190, 111), rgb(87, 160, 255));*/
background-color: #6dcb2f;
color:white;
padding:40px 0;
}
#footer .credits a {
color:#fff;
text-decoration:underline;
}
.credits{
padding-bottom: 5px;
}
ul.social-icons{
padding: 0;
}
ul.social-icons li {
display:inline-block;
margin:5px;
font-size:35px;
}
.copyright {
margin-top:40px;
border-top:1px solid rgba(255,255,255,0.31);
padding-top:40px;
}
ul.social-icons i {
color:white;
border-radius:100%;
display:block;
width: 50px;
height: 50px;
padding: 9px;
}
ul.social-icons li a {
display:block;
}
.footer-logo h1 {
color: white;
}
.social-icons ul li a i{
color: white;
border-color: white;
}
.facebook a:hover i {
color:#fff;
background-color:#6dcb2f;
}
.twitter a:hover i {
color:#fff;
background-color: #6dcb2f;
}
.linkedin a:hover i {
color:#fff;
background-color:#6dcb2f;
}
.googleplus a:hover i {
color:#fff;
background-color:#6dcb2f;
}
.github a:hover i {
color:#fff;
background-color: #444;
}
.back-to-top {
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
display:none;
border-radius: 0;
opacity: 0.75;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH Media Quiry
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
@media screen and (max-height: 30.5em) {
.overlay nav {
height: 70%;
font-size: 34px;
}
.overlay ul li {
min-height: 34px;
}
}
@media (max-width: 966px){
.header{
height: 100%;
}
.header img{
display: none;
}
.img-hover{
left: 0;
right: 0;
}
#gallery h2{
display: block;
color: black;
text-align: center;
}
#gallery .virticle-line, #gallery .circle{
display: block;
}
#team .icon-p{
left: 231px;
}
/*#speciality .container .row .col-sm-4:nth-child(2){
border-right: 2px solid #888;
}*/
#contact i{
color: #9d9d9d;
border-color: #9d9d9d;
}
#contact .col-sm-6:hover i{
background-color: #6dcb2f;
color: #fff;
border-color: #fff;
}
h3{
font-weight: 500 !important;
}
#bigfeatures li i{
display: none;
}
.form .message{
width: 96%;
}
}
@media (max-width: 480px){
h2{
font-size: 35px;
}
.wrapper{
padding: 35px 0px;
}
.header{
text-align: center;
padding: 10px 0px;
}
.banner-text {
margin-top: 50px;
}
.btn.btn-download{
margin-right: 5px;
width: 133px;
margin-bottom: 30px;
}
.btn.btn-download i {
font-size: 36px;
margin-right: 16px;
margin-left: 0px;
}
.overlay .overlay-close {
right: 45px;
top: 30px;
}
.nav-button button{
font-size: 36px;
margin-top: -20px;
}
#logo{
font-size: 56px;
text-align: left;
}
.btn-download{
margin: 5px 0px;
}
ul.pricing-table>li {
margin: 10px -20px;
width: 100%;
}
#speciality .container .row .col-sm-4:nth-child(2){
border: 0px;
}
.item-list-right.item-list-big li, .item-list-left.item-list-big li{
padding: 0 0 60px 0;
margin: 0px;
text-align: left;
}
li.li i {
display: none;
}
#features img{
display: none;
}
.features-list, .features-list-left {
padding: 10px;
}
.features-list ul.right li {
padding: 10px 5px;
}
.features-list-left{
text-align: left;
}
.features-list-left ul.left li {
padding-bottom: 10px;
margin-left: -30px;
text-align: left;
}
.features-list ul.right{
padding: 0px;
margin: 0px;
}
.features-list-left ul.left{
padding: 0px;
margin-left: 40px;
}
.owl-theme .owl-controls .owl-page span{
height: 70px;
width: 70px;
}
.owl-theme .owl-controls .owl-page:nth-child(1){
background-size: 70px 70px;
}
.owl-theme .owl-controls .owl-page:nth-child(2){
background-size: 70px 70px;
}
.owl-theme .owl-controls .owl-page:nth-child(3){
background-size: 70px 70px;
}
ul.social-icons li{
margin: 0px;
}
.form .message{
width: 91%;
}
}
@media (max-width: 320px){
.overlay nav ul{
margin-left: -20px;
}
.overlay .overlay-close {
right: 50px;
}
}.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.96);
z-index: 9999;
display: none;
display: flex;
justify-content: center; /* centraliza horizontalmente */
align-items: center; /* centraliza verticalmente */
text-align: center;
}
.overlay nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.overlay nav ul li {
margin: 25px 0;
}
.overlay nav ul li a {
font-size: 3em; /* aumenta o tamanho da letra */
color: #fff;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
}
.overlay nav ul li a:hover {
color: #6dcb2f; /* verde no hover */
}
.overlay-close {
position: absolute;
top: 20px;
right: 30px;
font-size: 1.5em;
color: #fff;
background: none;
border: none;
cursor: pointer;
}
.menu-trigger {
position: fixed;
top: 20px;
right: 30px;
z-index: 10000;
background: none;
border: 2px solid #fff;
color: #fff;
padding: 10px 20px;
cursor: pointer;
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.96);
z-index: 9999;
display: none;
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
text-align: center;
flex-direction: column;
}
.overlay nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.overlay nav ul li {
margin: 30px 0; /* um pouco mais espaçado */
}
.overlay nav ul li a {
font-size: 3.2em; /* fonte ainda maior */
color: #fff;
text-decoration: none;
font-weight: 700;
transition: color 0.3s ease;
letter-spacing: 2px;
}
.overlay nav ul li a:hover {
color: #6dcb2f; /* verde no hover */
}
.overlay-close {
position: absolute;
top: 30px;
right: 40px;
font-size: 2em;
color: #fff;
background: none;
border: none;
cursor: pointer;
z-index: 10000;
}
.menu-trigger {
position: fixed;
top: 30px;
right: 40px;
z-index: 10000;
background: none;
border: 2px solid #fff;
color: #fff;
padding: 10px 25px;
font-size: 1em;
cursor: pointer;
}
/* Linha de Contato */
.topbar {
background-color: #f7f7f7;
font-size: 0.9em;
padding: 5px 0;
border-bottom: 1px solid #e0e0e0;
}
.container-topbar {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: auto;
padding: 0 20px;
}
.container-topbar .left span {
margin-right: 20px;
color: #333;
}
.container-topbar .right a {
margin-left: 10px;
color: #999;
text-decoration: none;
font-size: 1em;
}
/* Menu Principal */
.main-menu {
background: #fff;
padding: 10px 0;
border-bottom: 2px solid #6dcb2f;
position: sticky;
top: 0;
z-index: 1000;
}
.main-menu nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.main-menu nav ul li {
position: relative;
margin: 0 15px;
}
.main-menu nav ul li a {
text-decoration: none;
font-size: 1.1em;
color: #333;
font-weight: 600;
padding: 10px;
}
.main-menu nav ul li a:hover {
color: #6dcb2f;
}
/* Submenu */
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 999;
min-width: 250px;
text-align: left;
}
.submenu li {
margin: 0;
}
.submenu li a {
display: block;
padding: 10px 15px;
font-size: 0.95em;
border-bottom: 1px solid #eee;
white-space: nowrap;
}
.dropdown:hover .submenu {
display: block;
}
/* Font Awesome (para ícones sociais) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}
/* --- AJUSTES SOLICITADOS PARA SEÇÃO DE PRODUTOS --- */
/* Reduz margem inferior do título "PRODUTOS" */
.section-title,
#produtos h2,
.produtos-titulo {
margin-bottom: 15px !important;
font-size: 2.5rem !important;
font-weight: 700;
color: #222;
}
/* Aumenta fonte da barra de filtros/categorias de produtos */
.product-filter-menu,
.filter-menu,
#produtos .portfolio-filter {
font-size: 18px;
font-weight: 600;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}
.product-filter-menu a,
.filter-menu a,
#produtos .portfolio-filter a {
color: #444;
text-decoration: none;
transition: color 0.3s ease;
}
.product-filter-menu a:hover,
.filter-menu a:hover,
#produtos .portfolio-filter a:hover {
color: #6dcb2f;
font-weight: bold;
}
/* Ativo */
.product-filter-menu .active,
.filter-menu .active,
#produtos .portfolio-filter .active {
color: #6dcb2f;
font-weight: bold;
}
/* --- ESTILO GERAL DE TEXTO --- */
h1, h2, h3, h4, h5, h6 {
font-family: 'Oxygen', sans-serif;
font-weight: 700;
margin-top: 0;
margin-bottom: 0.75rem;
color: #242424;
text-transform: none;
}
body, p, a, span, li, input, textarea, button {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
text-transform: none;
}
/* Limpa estilos de margem/padding globais */
body {
margin: 0;
padding: 0;
background-color: #fff;
color: #222;
}
/* Links padrão */
a {
color: #6dcb2f;
text-decoration: none;
}
a:hover {
color: #5ab126;
text-decoration: none;
}
.top-bar {
background-color: #f2f2f2;
font-size: 14px;
color: #444;
padding: 6px 0;
border-bottom: 1px solid #ddd;
}
.container-topbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.topbar-left i,
.topbar-right i {
margin-right: 5px;
color: #6dcb2f; /* verde da marca LINK */
}
.topbar-right a {
color: #555;
margin-left: 10px;
text-decoration: none;
transition: color 0.3s ease;
}
.topbar-right a:hover {
color: #6dcb2f;
}
.main-header {
background-color: #fff;
padding: 15px 30px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #ddd;
}
.container-header {
width: 100%;
max-width: 1200px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo-header img {
max-height: 50px;
height: auto;
}
.nav-header .menu {
list-style: none;
display: flex;
align-items: center;
gap: 18px;
margin: 0;
padding: 0;
}
.nav-header .menu li a {
text-decoration: none;
color: #333;
font-weight: 500;
font-size: 15px;
}
.nav-header .menu .flag {
width: 24px;
height: auto;
}
.contact-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn-whatsapp,
.btn-phone {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #ccc;
padding: 6px 12px;
border-radius: 5px;
color: #fff;
font-weight: bold;
font-size: 14px;
text-decoration: none;
}
.btn-whatsapp {
background-color: #25D366;
}
.btn-phone {
background-color: #444;
}
.menu .dropdown {
position: relative;
}
.menu .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: white;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
padding: 0;
margin: 0;
list-style: none;
min-width: 250px;
z-index: 999;
}
.menu .submenu li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
transition: background 0.3s ease;
}
.menu .submenu li a:hover {
background-color: #6dcb2f;
color: white;
}
/* Mostrar no hover com mouse */
.menu .dropdown:hover > .submenu {
display: block;
}
/* Responsivo para clique no mobile */
.menu .dropdown.open > .submenu {
display: block;
}
.aplicacoes-sucesso {
text-align: center;
padding: 60px 30px;
background-color: #f9f9f9;
}
.aplicacoes-sucesso .descricao {
max-width: 800px;
margin: 0 auto 40px;
}
.produtos {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.produto {
width: 300px;
height: auto;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.produto:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
/* Modal */
.modal-produto {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
}
.modal-produto img {
max-width: 90%;
max-height: 80vh;
border: 8px solid #fff;
border-radius: 8px;
}
.fechar-modal {
position: absolute;
top: 40px;
right: 60px;
font-size: 40px;
color: white;
cursor: pointer;
}
.aplicacoes-genius-full {
width: 100vw;
margin: 0;
padding: 0;
}
.galeria-genius-full {
display: flex;
width: 100%;
height: 500px;
}
.galeria-genius-full .item {
flex: 1;
position: relative;
overflow: hidden;
cursor: pointer;
}
.galeria-genius-full .item img {
width: 100%;
height: 100%;
object-fit: contain;
transition: 0.3s ease-in-out;
display: block;
background: white;
}
.hover-efeito {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(145, 236, 14, 0.85);
color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: 0.3s ease;
font-weight: bold;
font-size: 24px;
}
.item:hover .hover-efeito {
opacity: 1;
}
.plus {
font-size: 48px;
line-height: 1;
}
/* Modal continua igual */
.modal-genius {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.85);
align-items: center;
justify-content: center;
}
.modal-genius img {
max-width: 90%;
max-height: 80%;
border-radius: 8px;
background: #fff;
padding: 10px;
}
.modal-genius .fechar {
position: absolute;
top: 30px;
right: 50px;
font-size: 40px;
color: white;
cursor: pointer;
}
.aplicacoes-genius-full {
width: 100vw;
margin: 0;
padding: 0;
}
.galeria-genius-full {
display: flex;
width: 100%;
height: 500px;
}
.galeria-genius-full .item {
flex: 1;
position: relative;
overflow: hidden;
cursor: pointer;
}
.galeria-genius-full .item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.hover-efeito {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(145, 236, 14, 0.85);
color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: 0.3s ease;
font-weight: bold;
font-size: 24px;
}
.item:hover .hover-efeito {
opacity: 1;
}
.plus {
font-size: 48px;
line-height: 1;
}
.modal-genius {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.85);
justify-content: center;
align-items: center;
}
.modal-genius img {
max-width: 90%;
max-height: 85%;
border-radius: 8px;
background: #fff;
padding: 10px;
}
.modal-genius .fechar {
position: absolute;
top: 30px;
right: 50px;
font-size: 40px;
color: #fff;
cursor: pointer;
}
.destaque-catalogo {
background-color: #000; /* Fundo preto */
color: #fff; /* Texto branco */
font-size: 1.3rem; /* Tamanho maior da fonte */
font-weight: bold; /* Texto em negrito */
padding: 16px 32px; /* Mais espaço interno */
border-radius: 8px; /* Cantos levemente arredondados */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra */
transition: 0.3s ease all;
text-transform: uppercase; /* Texto em caixa alta */
letter-spacing: 1px;
}
.destaque-catalogo:hover {
background-color: #1a1a1a;
transform: scale(1.03);
text-decoration: none;
}
.tarja-catalogo {
position: relative;
left: 0;
width: 100vw;
background-color:#6dcb2f;
height: 120px; /* Aumente/diminua conforme o destaque desejado */
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
margin-left: calc(-50vw + 50%); /* Garante alinhamento à margem esquerda absoluta */
z-index: 1;
}
.tarja-catalogo a {
color: #6dcb2f;
font-size: 1.6rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s ease;
}
.tarja-catalogo a:hover {
color: #ccc;
text-decoration: underline;
}
/* Correções específicas mobile */
@media (max-width: 767px) {
.sobre-section .col-md-4 {
padding-left: 15px !important;
padding-right: 15px !important;
text-align: center;
}
.galeria-genius-full .item {
flex: 1 1 100% !important;
max-width: 100% !important;
}
.js__parallax-window {
background-attachment: scroll !important;
background-position: center !important;
}
}
/* Ajustes gerais */
video {
width: 100%;
height: auto;
object-fit: cover;
}
.galeria-genius-full {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
gap: 0;
}
.galeria-genius-full .item img {
width: 100%;
height: auto;
display: block;
}
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-conteudo {
display: block;
margin: 5% auto;
max-width: 80%;
max-height: 80%;
border-radius: 0;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}
/* Novo botão X no centro */
.modal-fechar {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
..modal-fechar {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.modal-botoes {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 10000;
}
.modal-btn {
background: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
transition: transform 0.2s;
}
.modal-btn:hover {
transform: scale(1.1);
}
.item {
position: relative;
display: inline-block;
overflow: hidden; /* Garante que nada ultrapasse */
cursor: pointer;
transition: transform 0.3s;
}
.item img {
display: block;
width: 100%;
height: auto;
vertical-align: middle;
}
.hover-efeito {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(145, 236, 14, 0.85);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: 0.3s ease-in-out;
pointer-events: none;
}
.item:hover .hover-efeito {
opacity: 1;
pointer-events: auto;
}
.item {
position: relative;
overflow: hidden;
}
.hover-efeito {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* fundo escuro ao passar o mouse */
opacity: 0;
transition: opacity 0.3s ease;
}
.item:hover .hover-efeito {
opacity: 1;
}
.icone-hover {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: 8px;
}
.texto-hover {
color: #fff;
font-size: 14px;
text-align: center;
max-width: 80%;
}
.icone-hover {
width: 40px;
height: 40px;
margin-bottom: 8px;
}
.hover-efeito {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0, 255, 0, 0.7); /* máscara verde */
opacity: 0;
transition: opacity 0.3s ease;
}
.item:hover .hover-efeito {
opacity: 1;
}
.texto-hover {
color: #000;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.modal-fechar {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.parallax-full{
width:100vw;
margin:0;
padding:0;
min-height:500px;
background:
url('img/1920x1080/03.jpg')
center center / cover
no-repeat fixed;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.parallax-full::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:
rgba(0,0,0,.35);
}
.parallax-overlay{
position:relative;
z-index:2;
text-align:center;
padding:120px 40px;
max-width:1200px;
}
.parallax-overlay h2{
margin-bottom:40px;
color:#fff;
font-weight:700;
}
@media(max-width:768px){
.parallax-full{
background-attachment:scroll;
min-height:350px;
}
}.contact-buttons {
display: flex;
align-items: center;
gap: 10px; /* Cria um espaçamento uniforme entre os botões */
}
.btn-delivery {
background-color: #f39c12; /* Cor de fundo (ex: laranja/amarelo de atenção), mude se preferir */
color: #fff;
padding: 10px 15px;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 5px; /* Espaço entre o ícone do caminhão e o texto */
}