/* ============== HEADER ============== */
header { background-color: transparent; position: relative; z-index: 99999; padding: 0px 0px 26px 0px; }

header:is(.headerFixed, .topofixo) .headerFixed__hide {  overflow: hidden; transition: .3s ease-out; background-color: var(--light); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2); }
header .header__logo { margin: .75rem 0; width: 400px; padding: 0 20px; }
header .header__contact { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; }

.header-bg {
    background-color: transparent;
}

header .header__contact :is(a, span) { color: var(--grey); font-size: .875rem; transition: .3s ease-out; }
header .header__contact>a:hover { color: var(--primary-color); }

header .header__menu { width: 100%; height: auto; padding: .3rem 0; background: var(--Gradiente, linear-gradient(90deg, #C73336 67.5%, #FBB22F 100%));
    border-radius: 0 0 15px 15px; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2); }

/* SEARCH */
header .search { box-shadow: unset; }
header .search .search__form { display: flex; align-items: center; justify-content: space-between; gap: .25rem; width: 100%; max-width: 12rem; padding: .25rem; border-radius: 9999px; background-color: white; }
header .search .search__input { height: 100%; padding-left: .75rem; color: var(--grey); font-size: 1rem; border: none; outline: none; background: transparent; border-radius: 9999px; }
header .search .search__input::placeholder { font-size: 1rem; color: var(--grey); }
header .search .search__button { display: flex; align-items: center; justify-content: center; width: 3.5rem; aspect-ratio: 1/1; color: var(--primary-color); font-size: 1rem; border: unset; background: unset; border: 2px solid rgba(0, 0, 0, .25); border-radius: 9999px; transition: .3s ease-out; outline: unset; }
header .search .search__button:hover { color: white; background-color: var(--primary-color); }

/* MEDIUM DEVICE */
@media only screen and (max-width: 768px) {
  header { position: static; display: flex; align-items: center; justify-content: space-between; }  
  header:is(.headerFixed, .topofixo) .headerFixed__hide { height: auto; overflow: unset; }
  header .header__contact { display: none; }
  header .search { margin-bottom: 1rem; }
  header .search .search__form { border: 2px solid rgba(0, 0, 0, .25); }
  header .header__menu { background-color: transparent; }
}

@media screen and (max-width: 576px) {
  header { flex-direction: column; }
}

/* MENU */
header #menu ul { height: 100%; display: flex; gap: 4.25rem; }
header #menu li { padding: 0; position: relative; }
header #menu li a { display: flex; align-items: center; height: 100%; padding: .75rem 1rem; color: #fff; font-size: .85rem; font-weight: bolder; letter-spacing: 3px; text-transform: uppercase; border-radius: .25rem; }

.active-menu-topo, header #menu li:hover>a { background-color: rgba(0, 0, 0, .25); }

header #menu .dropdown :is(.sub-menu, .sub-menu-info) { display: block; visibility: hidden; opacity: 0; left: 100px; padding: 10px; transition: .3s ease-out; background-color: var(--primary-color); }
header #menu .dropdown:hover :is(.sub-menu, .sub-menu-info) { visibility: visible; opacity: 1; left: 0; }
header #menu .dropdown :is(.sub-menu, .sub-menu-info) li { display: flex; flex-direction: column-reverse; padding: 0; }
header #menu .dropdown :is(.sub-menu, .sub-menu-info) li:before { border-top: 1px solid #fff; position: relative; }
header #menu .dropdown :is(.sub-menu, .sub-menu-info) li a { padding: .75rem .875rem; }
header #menu .dropdown :is(.sub-menu, .sub-menu-info) li:hover>a { background-color: rgba(0, 0, 0, .25); color: #fff; }

/* ASIDE */
.aside .aside__btn, .aside .aside__menu h2, .aside .aside__contato h2 { font-size: 14px; background-color: var(--primary-color); padding: 10px; display: block; transition: .3s; color: #fff; }
.aside .aside__btn { color: #fff; text-align: center; border-radius: 3px; }
.aside .aside__btn:hover { background-color: var(--dark); }
.aside .aside__menu h2 a { color: #fff; }
.aside .aside__menu nav ul li { border-left: 2px solid var(--primary-color); margin: 10px 0; padding: 5px; transition: .2s; }
.aside .aside__menu nav ul li a { color: var(--dark); font-size: 12px; border-left: 0; padding: 0; transition: .3s; }
.aside .aside__menu nav ul li:hover { border-left-color: var(--dark); background-color: #f0f0f0; }
.aside .aside__menu nav ul li a.active-menu-aside { color: var(--primary-color); font-weight: bold; }
.aside .aside__contato h2 { text-align: center; }
.aside .aside__contato a { color: var(--dark); text-align: center; display: block; margin: 10px; transition: all .2s ease; }
.aside .aside__contato a:hover { color: #5492c3; }
.aside .fb-page { display: block; margin-bottom: 25px; }


/* =============================== FOOTER =============================== */

footer {
    padding: 0 !important;
    background-color: #fff;
    border-top: 2px solid var(--primary-color);
}

footer .wrapper {
    max-width: 980px;
}

footer h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: black;
    font-size: 1em;
    text-align: center;
}

footer .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .address {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

footer .address :is(a, span) {
    font-size: 16px;
    line-height: 28px;
    color: var(--dark);
    transition: .3s;
}

footer .address a i {
    color: var(--primary-color);
}

footer .address span i {
    color: var(--primary-color);
}

footer .address a:hover {
    color: var(--primary-color);
}

footer .social {
    gap: 8px;
    justify-content: center;
}

footer .social .social__icons {
    font-size: 16px;
    border-radius: 6.25rem;
    background: linear-gradient(90deg, #2B3F1E 0%, #3F5A2D 100%);
    padding: 7px 8px;
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    transition: .4s;
}

footer .social .social__icons:hover {
    background-color: var(--secondary-color);
}

footer .footer__menu {
    padding: 1.25rem 0;
    background: var(--Gradiente, linear-gradient(90deg, #C73336 67.5%, #FBB22F 100%));
}

footer .footer__menu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

footer .footer__menu ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.25rem;
}

footer .footer__menu ul li a {
    color: #fff;
    transition: .3s;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}

footer .footer__menu li a:hover {
    color: var(--secondary-color);
}

.copyright-footer .selos {
    float: none;
}

.copyright-footer .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* MEDIUM DEVICE */
@media only screen and (max-width:768px) {
    footer * {
        text-align: center;
    }
}

/* SMALL DEVICE */
@media only screen and (max-width:576px) {
    footer .footer__menu ul {
        flex-direction: column;
    }

    footer .footer__menu ul li:after {
        display: none;
    }
}

 
/* DESTAQUES */

.destaques-mpi {
    margin: 32px 0;
}

.destaques-mpi__title {	margin: 0 0 30px 0;	color: var(--primary-color); }

.destaques-mpi__title span { color: var(--dark); }

/* FIM DESTAQUES */

/* CLIENTES */

.clientes {
    padding: 32px 0;
}

.clientes__title { margin: 0 0 30px 0; }
.clientes__item { display: flex !important; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1/1; padding: 8px; margin: 0 10px; background-color: #fff;}

.clientes__carousel {
    padding: 0 16px;
}

.clientes__image {
	max-width: 100%;
	max-height: 100%;
}

/* FIM CLIENTES */

/* ==================== Cards mod-21 ==================== */

.card.card--mod-21 {position: relative;border-radius: .25rem;overflow: hidden}
.card.card--mod-21 .card__image {display: block;width: 100%;aspect-ratio: 4/4;object-fit: cover}
.card.card--mod-21 .card__title {margin: 0;padding: .75rem;display: flex;align-items: center;justify-content: center;position: absolute;left: 0;bottom: 0;width: 100%;height: calc((1.125rem * 3)*1.3);font-size: 1.125rem;text-align: center;color: #fff;background-color: var(--primary-color);line-height: 1.3;}
.card.card--mod-21 .card__title::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;border: 2px solid #fffC;opacity: 0;border-radius: .25rem;transition: all .3s ease-out;transition-delay: 0s}
.card.card--mod-21:focus .card__title,
.card.card--mod-21:hover .card__title {height: 100%;}
.card.card--mod-21:hover .card__title::after {width: calc(100% - 2rem);height: calc(100% - 2rem);margin: 1rem;opacity: 1;transition-delay: .2s}

/* ================== FIM Cards mod-21 ================== */

.title--default {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #404A3D;
    text-transform: uppercase;
    font-size: 2.3em;
}

.title--default::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 4px;
    width: 10%;
    border-radius: 100px;
    background: var(--Gradiente, linear-gradient(90deg, #C73336 67.5%, #FBB22F 100%));
}

.title--default span {
    letter-spacing: 3px;
    font-size: .5em;
    font-weight: 300;
    color: var(--grey);
    text-transform: uppercase;
}

.title--default-02 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: black;
    font-size: 2.3em;
}

.title--default-02::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    height: 4px;
    width: 10%;
    border-radius: 100px;
    background: var(--Gradiente, linear-gradient(90deg, #C73336 67.5%, #FBB22F 100%));
}

.title--default-02 span {
    letter-spacing: 3px;
    font-size: .5em;
    font-weight: 300;
    color: var(--grey);
    text-transform: uppercase;
}

.title--default-03 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #404A3D;
    text-transform: none;
    font-size: 2.3em;
}

.title--default-03::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 4px;
    width: 10%;
    border-radius: 100px;
    background: var(--Gradiente, linear-gradient(90deg, #C73336 67.5%, #FBB22F 100%));
}

.title--default-03 span {
    letter-spacing: 3px;
    font-size: .5em;
    font-weight: 300;
    color: var(--grey);
    text-transform: uppercase;
}


.cta {
    background: var(--Gradiente, linear-gradient(90deg, #C73336 67.5%, #FBB22F 100%));
    padding: 25px 0;
}

.cta h2 {
    color: #fff;
    font-size: 2.2em;
    text-transform: uppercase;
    line-height: 1.1;
}

.cta p {
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.1;
}

.cta a {
    color: black;
    background-color: #fff;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: .8em;
    font-weight: 500;
    padding: .6em 1em;
    border: 1px solid #fff;
    transition: .4s;
}

.cta a:hover {
    color: #fff;
    background-color: transparent;
}

.cta-home {
    background-image: url(<?=$url?>imagens/cta/bg-cta.webp);
    background-size: cover;
}

.cta-home :is(h2, p) {
    color: #fff;
    margin: 0;
}

.cta-home .cta-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 20px;
}

.cta-home h2 {
    font-size: 2.3em;
}

.cta-home p {
    font-size: 1.3em;
    line-height: 1.1;
}

.home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-22px);
}

.home p {
    text-align: center;
}

.home h1 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 1.9em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0px 122px;
    gap: 24px;
    align-self: stretch;
}

.home h1::after {
    content: "";
    position: absolute;
    width: 3px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(0deg, #C73336 67.5%, #FBB22F 100%);
}

.home h1 > span {
    letter-spacing: 2px;
    color: black;
    font-size: .4em;
    font-weight: 400;
}

@media only screen and (max-width: 768px) {
    .home {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateY(0);
    }
}

.card-produtos {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.card-produtos img {
    border-radius: 20px;
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.card-produtos .card__buttons {
    display: flex;
    justify-content: space-between;
}

.card-produtos .card__buttons .btn-prod-01 {
    padding: .8em 1.2em;
    color: var(--grey);
    font-weight: 600;
    letter-spacing: 2px;
    transition: .4s;
    font-size: .7em;
    border-radius: 5px;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.card-produtos .card__buttons .btn-prod-01:hover {
    color: #fff;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.card-produtos .card__buttons .btn-prod-02 {
    padding: .8em 1.2em;
    border-radius: 5px;
    color: var(--grey);
    font-weight: 600;
    letter-spacing: 2px;
    transition: .4s;
    font-size: .7em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.card-produtos .card__buttons .btn-prod-02:hover {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.title-prod {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.6em;
}

.title-prod span {
    color: var(--grey);
    text-transform: uppercase;
    font-size: .6em;
}

/* =============================== ORGANIC TABS =============================== */

.organictabs--mod-2 .neumorphic__navigation {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-align: center;
    padding: 10px;
}
.organictabs--mod-2 .tabs--fx {
    display: none;
}

.organictabs--mod-2 .neumorphic__navigation span {
    padding: 9px 12px;
    display: block;
    color: var(--dark);
    font-size: 14px;
    transition-delay: 0s;
    transition-duration: 0.5s;
    border-radius: 0.75rem;
    text-transform: uppercase;
    cursor: pointer;
}

.organictabs--mod-2 .neumorphic__navigation span.wait-animation {
    pointer-events: none;
}

.organictabs--mod-2 .neumorphic__navigation span:not(:first-of-type):not(:last-of-type) {
    margin: 0 10px;
}

.organictabs--mod-2 .neumorphic__navigation span.active {
    color: #fff;
    background-color: var(--primary-color);
    transition-delay: 0.25s;
    transition-duration: 0.5s;
}

.organictabs--mod-2 .neumorphic__content h2 {
    color: var(--dark);
}

.produtos-carousel {
    display: flex;
    gap: 20px;
}

.produtos-carousel .card-produtos {
    margin: 0 10px;
}

.banner-home {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.banner-home__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
}

.galeria-video {
    max-height: 300px;
    max-width: 300px;
}

.galeria__image img {
    height: 300px;
    width: 100%;
}

.title--galeria {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #404A3D;
    text-transform: none;
    font-size: 2.3em;
}

.title--galeria span {
    letter-spacing: 3px;
    font-size: .5em;
    font-weight: 300;
    color: var(--grey);
    text-transform: uppercase;
}

/* =============================== CAROUSEL CLIENTES =============================== */

.carousel--clientes .card__image {
    width: 50%;
    margin: 0 auto;
}

.carousel--clientes .clientes__item {
    position: relative;
    overflow: visible;
    backface-visibility: hidden;
    display: flex; 
    align-items:center;
    justify-content: center;
    padding: 25px 0;
    cursor: pointer;
    height: 100%;
}

.carousel--clientes .clientes__item:before {
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    left: -1px;
    border-left: 1px dashed #DDD;
}

.carousel--clientes .slick-prev:before, .carousel--clientes .slick-next:before {
    font-size: 42px;
    opacity: .25;
    color: var(--dark);
}

.topo-image img {
    border-radius: 20px;
    margin: 10px 0;
}

/* DEPOIMENTO */

.depoimentos-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    row-gap: 20px;
}

.depoimentos-item p {
    color: black;
    font-size: 16px;
}

.depoimentos-item h3 {
    color: #3D3D3D;
    margin: 5px 0;
    font-size: 16px;
}

.depoimentos-icon {
    display: flex;
    align-items: flex-start;
}

.depoimentos-icon i {
    color: #ffd900;
    font-size: .7em;
}

/*=============================== WHATSAPP BALLOON ===============================*/

.whatsapp__button {
    position: fixed;
	bottom: 339px;
	right: 24px;
	z-index: 999;
}

.linkedin__button {
    position: fixed;
	bottom: 154px;
	right: 24px;
	z-index: 999;
}

.email__button {
    position: fixed;
	bottom: 216px;
	right: 24px;
	z-index: 999;
}

.telefone__button {
    position: fixed;
	bottom: 277px;
	right: 24px;
	z-index: 999;
}

.endereco__button {
    position: fixed;
	bottom: 90px;
	right: 24px;
	z-index: 999;
}

.button__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px; 
    height: 56px;
	border-radius: 100%;
	color: #fff;
	padding: 1em;
    transition: .4s;
}

.button__icon i {
    font-size: 24px;
}

.button__icon:hover {
	transform: scale(1.1);
}

.whatsapp__button .button__icon {
	background-color: #4FD210;
}


.endereco__button .button__icon {
	background-color: #bbdb18;
}

.linkedin__button .button__icon {
	background-color: #186BDB;
}

.email__button .button__icon {
	background-color: #103A72
}

.telefone__button .button__icon {
	background-color: #C73336;
}

@media only screen and (max-width:765px) {
	.whatsapp--ballon {
		bottom: 65px;
		left: 20px;
	}

}


.txt-pop-up {
    /* font-weight: bold; */
    font-size: 18px;
    text-align: center;
}

.pop-up-new {
    display: inline-flex !important;
    justify-content: center;
    background: transparent !important;
    position: relative;
}


.pop-up-new .close {
    position: absolute;
    right: 60px;
    top: 50px;
    color: white;
}


.pop-up-new__box{
    display: flex;
    justify-content: center;
    position: relative;
}