/*!
Script: BookingDo
Author: Papon IT Solution
Support: paponapp2244@gmail.com
Version: 4.1
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Projeto Fusão-01, Fase 5 - fonte de destaque dos títulos do portal
   marketplace, mesma família usada pelo FixMate (Outfit), só nos títulos -
   o resto do site mantém a Montserrat de sempre. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');

:root {
    --color-white: #fff;
    --font-family: "Montserrat", sans-serif;
    --mp-heading-font: "Outfit", sans-serif;
    --bs-primary-rgb: color-mix(in srgb, var(--primary-color), transparent 90%);
    --bs-secondary-rgb: color-mix(in srgb, var(--secondary-color), transparent 90%);
    --bs-primary-rgb-2: color-mix(in srgb, var(--primary-color), transparent 50%);
    --bs-secondary-rgb-2: color-mix(in srgb, var(--secondary-color), transparent 50%);
}


* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    scroll-behavior: smooth;
    font-family: var(--font-family);
}

.fs-7 {
    font-size: 14px !important;
}

.fs-8 {
    font-size: 12px !important;
}

select:focus {

    outline: none;
}

textarea:focus {

    outline: none;
}

input:focus {

    outline: none;

}

.bg-primary {
    background-color: var(--primary-color) !important;
    color: #fff;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
    color: #fff;
}

.text-gradient {
    background: -webkit-linear-gradient(var(--secondary-color), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

/* button-top-arrow-up-ltr */

.button-top-arrow-up {
    background-color: var(--secondary-color);
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50px;
    position: fixed;
    bottom: 25px;
    right: 50px;
    transition: background-color .3s,
        opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

.button-top-arrow-up i {
    font-size: 25px;
    color: var(--color-white);
}

.button-top-arrow-up.show {
    opacity: 1;
    visibility: visible;
    cursor: pointer;
}

/* button-top-arrow-up-rtl */
.button-top-arrow-up-rtl {
    background-color: var(--secondary-color);
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50px;
    position: fixed;
    bottom: 25px;
    left: 50px;
    transition: background-color .3s,
        opacity .5s, visibility .5s;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-top-arrow-up-rtl.showw {
    opacity: 1;
    visibility: visible;
}

.button-top-arrow-up-rtl i {
    font-size: 25px;
    color: var(--color-white);
}

p,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0px;
    padding: 0px;
    font-family: var(--font-family);
}

button {
    font-family: var(--font-family) !important;
}

a {
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    font-family: var(--font-family) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}

/*-----------------------------Heager-Start-------------------------------------*/
/* language-dropdown start */
.drop-menu {
    top: 14px !important;
    right: 0px !important;
    left: -16px !important;
}

.drop-menu-rtl {
    top: 14px !important;
    left: 0px !important;
    right: -16px !important;
}

.language-drop {
    padding: 9px;
    color: var(--color-white) !important;
    font-family: var(--font-family) !important;
    font-weight: 400;
}

.drop-menu-2 li a {
    font-family: var(--font-family);

}

.drop-menu li a {
    font-family: var(--font-family);

}

/* language-dropdown end */
.header {
    background-color: var(--primary-color);
    width: 100%;
}

.bg-color-banner {
    background-color: var(--primary-color);
    width: 100%;
}


.Navbar {
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.togl-btn {
    display: none;
}

.logo a {
    font-size: 30px;
}

.btn-class {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.btn {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: #fff !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.main-btn {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
}

.main-btn:hover {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
}

.btn-class:hover {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.navbar-menu,
.collapse {
    flex-grow: 0;
}

.header-dropdown-menu {
    font-weight: 600;
}

.header-btn-login {
    background-color: var(--secondary-color);
    font-weight: 500;
}

/*-----------------------------Heager-End-------------------------------------*/
/*-----------------------------banner-stsrt-----------------------------------*/

.banner {
    padding-top: 60px;
}

.banner-text h1 {
    font-size: 50px;
    font-family: var(--font-family);
    color: var(--color-white);
    font-weight: 600;
}

.banner-text p {
    width: 610px;
    font-family: var(--font-family);
    color: var(--color-white);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
}

.banner-images {
    width: 100%;
    /* height: 55vh; */
}

.banner-images {
    animation: test 3s alternate infinite;
    width: 100%;
    object-fit: cover;
}

@keyframes test {
    from {
        bottom: 0px;
    }

    to {
        bottom: 30px;
    }
}

/* banner End */
/* project-management start */
.project-management {
    position: relative;
}

.project-management-bg-imag {
    background-image: url("../images/png/BACKGROUND.png");
    height: 500px;
    width: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 30%;
}

.project-management-text h5 {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 25px !important;
}


/* project-management End */

.work-title .line-image {
    position: absolute;
    left: 0px;
    bottom: -7px;
    width: 850px;
}

.project-management-text p {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

.project-management-image {
    width: 100%;
}

/*-----------------------------bannre-2-End-----------------------------------*/
/*-----------------------------work-together-start---------------------------*/

.Work-together-title {
    font-size: 72px;
}

.Work-together-title-bg-img {
    position: absolute;
    right: -10px;
    bottom: 0px;
    width: 70%;
}


/*-----------------------------work-together-End---------------------------------*/
/*-----------------------------Use-as-Extension-start----------------------------*/
.use-as-extension {
    /* background-color: #F5F6F7; */
    padding: 65px 0px 70px 0px;
}

.use-extension {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 56px;
    color: #000;
}

.use-as-extension-text {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

.extension-text h5 {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
}

/* Beautiful UI kit designed to grow your business start */
/* .beautiful-ui-kit-bg-color {
    background-color: #F5F6F7;
} */

.beautiful-ui-kit-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
    text-transform: capitalize;
    text-align: center;
    margin: auto;
}

.features-body h5 {
    font-family: var(--font-family);
    text-align: center;
    margin: auto;
    font-weight: 500;
    font-size: 18px;
}

.subtitle {
    text-align: center;
    margin: auto;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    padding-top: 20px;
}

.features-body {
    padding: 15px;
    border: 2px solid var(--primary-color);
}

.beautiful-card {
    transition: 0.5s ease-in-out;

}

.features-body i {
    background-color: #F0F5FF;
    transition: 0.5s ease-in-out;
    width: 74px;
    height: 60px;
}

.features-body i:hover {
    background-color: var(--primary-color);
    color: var(--color-white);
    transform: scale(1.05);
}

.beautiful-card:hover {
    transform: scale(1.05);
}

/* Beautiful UI kit designed to grow your business End */

/* our partners card-section-bg-color start */
#features .beautiful-ui-kit-bg-color,
#pricing-plans,
#blogs {
    padding: 90px 0px 85px 0px;
}

#contact-us,
#contacto {
    padding-top: 90px;
}


/*-----------------------------Use-as-Extension-End----------------------------*/
.customise {
    padding-top: 110px;
}

/*-----------------------------choose-plan-card-start-----------------------------*/

.choose-plan {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

/* .choose-card {
    padding: 50px 0px 70px 0px;
} */

.plan-card-border {
    border: 1px solid var(--secondary-color);
    transition: .5s ease-in-out;
}

.choose-plan-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
}

.plan-card-frist-titel {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 28px;
}

.plan-card-second-titel {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 21px;
}

/* .capture {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
}

.plan-card-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
}

.plan-card-border:hover {
    background-color: var(--primary-color);
    color: var(--color-white);
    border-radius: 8px;
}

.plan-card-border:hover h5 {
    color: var(--secondary-color);
}

.plan-card-border:hover button {
    background-color: var(--secondary-color);
    color: var(--color-white);
    border: none;
}

.plan-card-border:hover .iconimg i {
    color: var(--secondary-color);
}

.plan-card-border:hover {
    transform: scale(1.02);
}

.plan-card-border .card-footer {
    transition: .5s ease-in-out;
}

.plan-card-border:hover .card-footer {
    transition: .5s ease-in-out;
    background-color: var(--primary-color) !important;
} */

/*-----------------------------choose-plan-card-start-----------------------------*/
/* you-work-everywhere-you-are start */
.you-work-everywhere-you-are-bg-color {
    /* background-color: var(--secondary-color); */
    padding: 80px 0px;
    color: var(--bs-dark);
}

.you-work-everywhere-you-are {
    color: var(--bs-dark);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
}

.your-data {
    background-color: var(--bs-dark);
    padding: 85px 0px 40px 0px;
}

.your-data--titel {
    color: var(--secondary-color) !important;
}

.your-data-text {
    color: var(--secondary-color);
}

/* you-work-everywhere-you-are End */
/* our-sponsors start */
.sponsors-title {
    text-align: center;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 64px;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 60px;
}

/* our-sponsors End */
/* what-our-clients-says Start */

.what-our-clients-says-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
    text-align: center;
    margin: auto;
}

.how-works-subtitle {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    padding-top: 20px;
}

.clients-card-body-2 {
    padding: 30px;
}

.client-slaider {
    width: 75% !important;
}

.carousel-client-slaider h5 {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
    color: #000;
}

.carousel-client-slaider p {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #000;
}

.star-img {
    width: 30px !important;
    height: 20px;
}

.invisible-img {
    width: 50px !important;
    height: 50px !important;
}

.client-subtext {
    font-size: 14px !important;
}

.annette-text {
    font-family: var(--font-family);
    font-weight: 500 !important;
    font-size: 15px !important;
}

.google-ceo {
    font-family: var(--font-family);
    font-weight: 300 !important;
    font-size: 15px !important;
}

.quote-png {
    width: 20px !important;
    height: 20px !important;
}

.client-slaider-bg-color {
    background-color: #F5F6F7;
}

.client-slai .owl-nav {
    text-align: center !important;
    margin: 0px;
    margin-top: 15px;
}

.client-slai button.owl-prev {
    margin-right: 20px !important;
    background-color: var(--color-white) !important;
    border-radius: 50% !important;
    font: initial !important;
    width: 50px;
    height: 50px;
    font-size: 30px !important;
    color: #000 !important;
}

.client-slai button.owl-next {
    font: initial !important;
    background-color: var(--color-white) !important;
    border-radius: 50% !important;
    width: 50px;
    height: 50px;
    font-size: 30px !important;
    color: #000 !important;
    padding-bottom: 65px !important;
}

.them-1 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    text-transform: uppercase;
}

.them-card-box:hover img {
    transform: scale(1.05);
}

.clients {
    padding-top: 60px;
    padding-bottom: 75px;
}

/* what-our-clients-says End */
/*  Have a project in mind! Let’s work together start */
.have-project-section-bg-color {
    background-color: var(--secondary-color);
    color: var(--color-white);
}

.have-project-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
}

.have-project-subtitle {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

/*  Have a project in mind! Let’s work together rnd*/

/* footer start */
.footer-bg-color {
    background-color: var(--primary-color);
    width: 100%;
    height: 100%;
    padding: 60px 0px 10px 0px;
}

.icon-name {
    color: var(--primary-color);
}

/* .footer-title {
    color: var(--color-white);
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    text-transform: capitalize;
} */

.footer-btn button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-white);
}

/* .footer-contain p a {
    color: var(--color-white) !important;
    font-family: var(--font-family);
    font-weight: 500;
} */

.icon-flex {
    gap: 10px;
    color: var(--color-white);
}

.facebook-icon {
    padding-left: 14px;
    padding-right: 14px;
}

/* .footer-contain {
    color: var(--color-white) !important;
    font-family: var(--font-family);
    font-weight: 500;
} */

.copy-right-text {
    color: var(--color-white);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: var(--font-family);
}

/* footer End */
/*  Funfact start */
.fun-fact {
    background-color: var(--secondary-color);
}

.latest-blog {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
    text-align: center;
    margin: auto;
}

.blog-lorem-text {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    text-align: center;
    margin: auto;
}

.js-number i {
    color: var(--secondary-color);
}

.num {
    font-family: var(--font-family);
    font-size: 60px;
    font-weight: 600;
    color: var(--secondary-color);
}

.js-text-number {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-white);
}

.funfact-title {
    font-family: var(--font-family);
    font-size: 52px;
    font-weight: 600;
    color: var(--primary-color);
}

/*  Funfact End */
/* blog start */

.blog-card-hover {
    transition: 0.2s ease-in;
    object-fit: cover;
}

.blog-card-hover:hover {
    transform: scale(1.04);
}

.card-date {
    font-size: 14px;
    color: #B4BBC5;
}

.blog-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

/* blog End */
/* contact start */
.contact-bg-color {
    width: 100%;
    background-color: var(--font-white);
}

.contact-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
    line-height: 60px;
    letter-spacing: -0.015em;
}

.contact-subtitle {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: var(--primary-color);
}

.email-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
}

.infogolio-email a {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    color: var(--bs-secondary-color) !important;
}

.contact-line {
    width: 40px !important;
    height: 1px;
    background-color: var(--secondary-color);
}

.connect-with-us {
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--secondary-color);
}

.contact-icons {
    gap: 10px;
}

.contact-form-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 26px;
}

.contact-form-subtitle {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
}

.contact-form-label {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
}

.contact-input {
    font-family: var(--font-family);
    font-size: 13px;
}

.faq-bg-color {
    padding: 65px 0px 80px 0px;
    background-color: #F5F6F7;
}

.faq-title {
    padding-bottom: 30px;
    color: #000;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 34px;
    text-align: center;
    margin: auto;
}

.faq-subtitle {
    text-align: center;
    margin: auto;
    padding-bottom: 20px;
    color: #000;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    padding-top: 20px;
}

.accordion-body {
    background-color: var(--color-white);
}

.accordian-active {
    color: var(--secondary-color) !important;
    background-color: var(--primary-color);
    box-shadow: none !important;
}

.form-control:focus {
    box-shadow: transparent !important;
}

/* contact end */
/* blog-card-btn-read-more start */
.blog-details-bg-color {
    background-color: #fff;
    color: var(--secondary-color);
}

.blog-details-img {
    width: 100%;
}

.recent-blogs-titel {
    font-size: 32px;
    font-weight: 600;
    font-family: var(--font-family);
    color: #000;
}

.details-footer {
    color: #7d7d7c;
}

.blog-details-title {
    font-size: 30px;
    font-weight: 500;
    font-family: var(--font-family);
    color: #000;
}

.btn-primary {
    background: #F5F6F7;
    color: var(--primary-color);
    border-radius: 7px;
    padding: 10px 20px;
    font-weight: 500;
    text-transform: capitalize;
    display: inline-block;
    transition: .2s all ease-in-out;
    border: 1px solid #F5F6F7;
}

/* blog-card-btn-read-more End */
/* about-us start */
.about-us-bg-color {
    /* background-color: var(--color-white); */
    color: #7d7d7c;
}

.about-us-title {
    font-size: 56px;
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--primary-color);
}

.about-us-subtitle {
    color: var(--secondary-color);
}

.about-us-mini-title {
    font-size: 30px;
    font-weight: 600;
    font-family: var(--font-family);
    color: var(--secondary-color);
}

/* about-us end */
/* contact-list start */

/* contact-list end */

.connect-with-us-1 {
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--secondary-color);
}

.infogolio-email-1 a {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    color: var(--secondary-color) !important;
}

.email-text-1 {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    color: var(--secondary-color);
}


/* blog-list-view-all start */
.pagination-color {
    color: var(--secondary-color) !important;
}

.page-link {
    color: var(--secondary-color) !important;
}

.pagination {
    --bs-pagination-active-bg: var(--primary-color) !important;
    --bs-pagination-active-border-color: var(--primary-color) !important;
}

/* blog-lisg-viwe-all end */

.view-all-hover {
    transition: .2s ease-in-out;
}

.view-all-hover:hover {
    transform: scale(1.04);
}

.hotel-titel {
    text-align: center;
    margin: auto;
    padding-top: 80px;
}

.title-restaurant h5 {
    font-size: 30px;
    font-family: var(--font-family);
    font-weight: 500;

}

.hotel-card-box {
    padding: 70px 0px 100px 0px;
}

.hotel-main-title {
    text-align: center;
    margin: auto;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 42px;
}

.hotel-main-subtitle {
    text-align: center;
    margin: auto;
    padding-top: 20px;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

.hotel-title {
    color: #000 !important;
}

.hotel-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family);
}

.hotel-dropdown {
    max-height: 200px !important;
    overflow-y: scroll;
}

.hotel-loction-bar {
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    outline: 0;
    box-shadow: none !important;
}

.hotel-label {
    font-family: var(--font-family);
    font-weight: 600;
}

.select-drop {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    color: #989898;
}

.hotel-loction-bar {
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 24px;
    color: #989898 !important;
}

.owl-stage-outer {
    position: relative;
    overflow: hidden;

}

.accordion-button:focus {
    box-shadow: none !important;

}

.accordion-button [type="button"]:not(:disabled) {
    border: #989898 1px solid !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("../../landing/images/png/down.png") !important;
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button::after {
    background-image: url("../../landing/images/png/up.png") !important;

}

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

.text-secondary-color {
    color: var(--secondary-color);
}

.store-img {
    width: 100%;
    object-fit: cover;
}

.owl-stage-outer .owl-stage {
    display: flex !important;
}

/* accordion-button rtl css */
.accordion-button-rtl:focus {
    box-shadow: none !important;

}

.accordion-button-rtl [type="button"]:not(:disabled) {
    border: #989898 1px solid !important;
}

.accordion-button-rtl:not(.collapsed) {
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

.accordion-button-rtl:not(.collapsed)::after {
    background-image: url("../../landing/images/png/down.png") !important;
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button-rtl::after {
    background-image: url("../../landing/images/png/up.png") !important;
}

.accordion-button-rtl {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

.accordion-button-rtl::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-right: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}

/* accordion-button rtl css end */

.accordion-button:not(.collapsed) {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
    border-color: var(--secondary-color) !important;
}

.faq-img {
    object-fit: contain;
}

.item-1 img {
    width: 100% !important;
}

.them-name-images:hover {
    object-position: bottom;
}

.them-name-images {
    width: 100%;
    transform-origin: 50% 50%;
    object-fit: cover;
    object-position: top;
    height: 400px;
    transition: 10s all ease-in-out;
}

.js-cookie-consent {
    position: fixed;
    left: 0;
    bottom: 0;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 20px;
    border-radius: 1rem;
    text-align: center;
    z-index: 9999999999;
    background-color: #fff;
    border-color: var(--secondary-color);
}

@media (max-width: 767.98px) {
    /* O cartao de cookies (margin-right:30px) ia por baixo do WhatsApp/
       quick-call (right:20px, largura 50px = ocupam ate 70px da direita),
       cortando os botoes ao meio (efeito "meia-lua"). Afasta o cartao
       para nao entrar nessa faixa. */
    .js-cookie-consent {
        margin-right: 90px;
    }
}

.js-cookie-consent-agree {
    color: #fff !important;
    border-radius: 7px !important;
}

.max-w-7xl {
    max-width: 400px;
}

.btn-class:active {
    box-shadow: none !important;
}

/* ============ update 30-12 jenish ============ */

.fs-15px {
    font-size: 15px;
}

.fs-18 {
    font-size: 20px !important;
}

.line-3 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ============ How does it work ============ */
.management-main:nth-child(even) .landing-rtl.ltr {
    text-align: start !important;
}

.management-main:nth-child(even) .landing-rtl.ltr .row {
    justify-content: start !important;
}

.management-main:nth-child(even) .landing-rtl.rtl .row {
    justify-content: start !important;
}

.management-main:nth-child(even) .landing-rtl.rtl {
    text-align: start !important;
}

.management-main:nth-child(even) .landing-rtl.rtl {
    text-align: start !important;
}

.management-main:nth-child(odd) .management-image-2 {
    text-align: end;
}

.management-main:nth-child(even) .management-image-2 {
    text-align: start !important;
}


/* ============= buttons ============= */
.btn-border-white,
.btn-border-white:active {
    border: 1px solid #fff;
    background-color: transparent !important;
    color: #fff !important;
    padding: 13px 34px;
    margin: 0 5px;
    display: inline-block;
}

.btn-border-dark,
.btn-border-dark:active {
    border: 1px solid #000;
    background-color: transparent !important;
    color: #000 !important;
    padding: 13px 34px;
    margin: 0 5px;
    display: inline-block;
}

.btn-border-primary,
.btn-border-primary:active {
    border: 1px solid var(--primary-color);
    background-color: transparent !important;
    color: var(--primary-color) !important;
    padding: 13px 34px;
    margin: 0 5px;
    display: inline-block;
}

.btn-primary,
.btn-primary:active,
.btn-primary:hover {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color) !important;
    color: #fff;
    padding: 13px 34px;
    margin: 0 5px;
    display: inline-block;
}

.btn-secondary,
.btn-secondary:active,
.btn-secondary:hover {
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color) !important;
    color: #fff;
    padding: 13px 34px;
    margin: 0 5px;
    display: inline-block;
}

/* ========== language btn ========== */
.lag-img {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50%;
    object-fit: cover !important;
}

.client-slai .owl-nav button i {
    line-height: 38px;
}

.project-img {
    width: 400px;
    padding: 20px;
}

/* =========== custom scroll =========== */
/* width */
::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* ======== planes ======== */
.plan-card-border:hover .capture {
    color: #fff !important;
}

.plan-card-border:hover .btn-border-primary {
    border-color: #fff !important;
    color: #fff !important;
}

/* ============ contact us icons ============ */
.contact-icon,
.contact-icon:hover {
    height: 50px;
    width: 50px;
    background-color: var(--secondary-color) !important;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ============ contact us icons ============ */

.store-input {
    padding: 13px 10px !important;
}

.theme-selection:hover img {

    object-position: bottom;

}

.theme-selection img {

    transition-duration: 0.2s;

    transform-origin: 50% 50%;

    object-fit: cover;

    object-position: top;

    height: 300px;

    transition: 2s all ease-in-out;

}

.footer_acceped_card li img {
    width: 36px;
}

.w-20px {
    width: 20px !important;
}

li,
ul {
    list-style: none;
}

.footer-btn a {
    color: #000 !important;
}

/*-------- whatsapp chat --------*/


.bg-msg {
    background-color: #E5DDD5;
}

.wrapper {
    position: fixed;
    right: 33px;
    bottom: 160px;
    width: 292px;
    background-color: #fff;
    border-radius: 5px;
    opacity: 0;
    transition: all 0.4s;
    z-index: 99999;
    visibility: hidden;
    overflow: hidden;
}

.wrapper_rtl {
    position: fixed;
    left: 12px;
    bottom: 170px;
    width: 292px;
    background-color: #fff;
    border-radius: 5px;
    transition: all 0.4s;
    z-index: 9999999999;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.chat-btn_ltr {
    position: fixed;
    right: 20px;
    bottom: 100px;
    cursor: pointer;
}

.chat-btn_rtl {
    position: fixed;
    left: 20px;
    bottom: 100px;
    cursor: pointer
}

.chat-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background-color: #25D366;
    color: #fff;
    border: none;
    z-index: 98;
}

/* .btn {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
} */

.whatsapp_icon_ltr {
    position: fixed !important;
    bottom: 40px !important;
    right: 70px !important;
    z-index: 98;
}

.whatsapp_icon_rtl {
    position: fixed !important;
    bottom: 40px !important;
    left: 70px !important;
    z-index: 98;
}

.chat-btn .close {
    display: none
}

.chat-btn i {
    transition: all 0.9s ease
}

#check:checked~.chat-btn i {
    display: block;
    pointer-events: auto;
    transform: rotate(180deg)
}

#check:checked~.chat-btn .comment {
    display: none
}

.chat-btn i {
    font-size: 25px;
    color: #fff !important
}


#check:checked~.wrapper {
    opacity: 1;
    visibility: visible;
}

#check:checked~.wrapper_rtl {
    opacity: 1;
    visibility: visible;
}

.msg_header {
    padding: 1rem;
    background-color: #075E54;
    color: #fff;
}

.msg_header h6 {
    margin: 0px;
    font-size: 16px;
}

.chat-form {
    padding: 15px
}

.chat-form input,
textarea,
button {
    margin-bottom: 10px
}

.chat-form textarea {
    resize: none;
    height: 70px;
}

.chat-form textarea:focus {
    border: 1px solid #dee2e6;
}

.form-control:focus,
.btn:focus {
    box-shadow: none !important
}

#check {
    display: none !important
}

/* ========================= Extra Css Add Dhruvil ==================== */
.fw-600 {
    font-weight: 600;
}

.form-select:focus {
    border-color: #dee2e6 !important;
    outline: 0;
    box-shadow: none !important;
}

.text-dark {
    color: #000 !important;
}

.breadcrumb-sec {
    padding-top: 1rem;
    padding-bottom: 1rem;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
    margin-bottom: 20px;
}

ol.breadcrumb {
    margin-bottom: 0px !important;
}

.active {
    color: var(--secondary-color) !important;
}

/* ================ QUICH CALL ================ */

.quick_call {
    position: fixed;
    right: 12px;
    bottom: 80px;
    width: 292px;
    background-color: #fff;
    border-radius: 5px;
    opacity: 0;
    transition: all 0.4s;
    z-index: 99999;
    visibility: hidden;
    overflow: hidden;
}

.quick_call_rtl {
    position: fixed;
    left: 12px;
    bottom: 160px;
    width: 292px;
    background-color: #fff;
    border-radius: 5px;
    transition: all 0.4s;
    z-index: 9999999999;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

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

    .quick_call_rtl {
        bottom: 80px;
    }

    .quick-btn_rtl {
        bottom: 20px !important;
    }
}



.quick-btn_ltr {
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
}

.quick-btn_rtl {
    position: fixed;
    left: 33px;
    bottom: 100px;
    cursor: pointer
}

.quick-btn {
    width: 50px;
    /* padding: 10px 25px; */
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background-color: var(--secondary-color);
    color: #fff;
    font-size: 18px;
    border: none;
    z-index: 500;
    /* transition: all .5s ease-in-out; */
}

.quick-btn .close {
    display: none
}

.quick-btn i {
    /* transition: all 0.9s ease */
}

#quick_call:checked~.quick-btn i {
    display: block;
    pointer-events: auto;
    transform: rotate(180deg)
}

#quick_call:checked~.quick-btn {
    padding: 10px;
    /* transition: all .4s ease-in-out; */
}

#quick-btn.expanded {
    width: 50px;
    /* animation: widtgg .5s ease-in-out; */
}

@keyframes widtgg {
    0% {
        width: 150px;
    }
}

#quick_call:checked~.quick-btn .comment {
    display: none
}

.quick-btn i {
    /* font-size: 26px; */
    color: #fff !important
}

#quick_call:checked~.quick_call {
    opacity: 1;
    visibility: visible;
    /* transition: all .4s ease-in-out; */
}

#quick_call:checked~.quick_call_rtl {
    opacity: 1;
    visibility: visible;
}

.call_info {
    padding: 1.5rem;
    display: grid;
    justify-content: center;
}

.call_info h6 {
    margin: 0px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.caller_img {
    height: 70px;
    width: 70px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
}

#quick_call {
    display: none !important
}

.btn-whatsapp,
.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background-color: var(--secondary-color) !important;
    color: #fff;
}

/* ================ BACK TO TOP (2026-08-27) ================
   Fica por cima do WhatsApp (right:20, bottom:100-150) e do quick-call
   (right:20, bottom:20-70), com o mesmo espacamento de 30px que ja existe
   entre esses dois - por isso bottom:180px, sem precisar de valor
   diferente no mobile (os outros dois tambem nao mudam). */
#back-to-top {
    position: fixed;
    right: 20px;
    bottom: 180px;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 96;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    transition: opacity .3s, visibility .3s, transform .15s ease;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    transform: translateY(-2px);
}

#back-to-top i {
    position: relative;
    z-index: 2;
    color: var(--secondary-color);
    font-size: 16px;
}

#back-to-top svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

#back-to-top circle {
    fill: none;
    stroke-width: 3;
}

#back-to-top .back-to-top-progress-bg {
    stroke: #eee;
}

#back-to-top .back-to-top-progress-bar {
    stroke: var(--secondary-color);
    stroke-linecap: round;
    transition: stroke-dashoffset .1s linear;
}

/* ======================== jenish css end ======================== */

.breadcrumb-item+.breadcrumb-item::before {
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, "•") !important;
    font-size: 22px;
    line-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
}


.breadcrumb-item+.breadcrumb-item::before {
    padding-right: 0px !important;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 0px !important;
}

.bg-primary-rgb {
    background-color:
        color-mix(in srgb, var(--primary-color), transparent 95%) !important;
}

.bg-secondary-rgb {
    background-color:
        color-mix(in srgb, var(--secondary-color), transparent 90%) !important;
}

.bg-gradient-color {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    z-index: 1;
}


.serviceBox {
    border: 1px solid #ededed;
    padding: 30px 30px 30px 90px;
    position: relative;
    transition: all 0.5s ease 0s;
}

.serviceBox.rtl {
    border: 1px solid #ededed;
    padding: 30px 90px 30px 30px;
    position: relative;
    transition: all 0.5s ease 0s;
}

.serviceBox:hover {
    box-shadow: var(--bs-box-shadow);
    border-color: var(--primary-color);
}

.serviceBox:before,
.serviceBox:after {
    content: "";
    display: block;
    width: 50px;
    height: 5px;
    background: var(--primary-color);
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}

.serviceBox.rtl:before,
.serviceBox.rtl:after {
    content: "";
    display: block;
    width: 50px;
    height: 5px;
    background: var(--primary-color);
    position: absolute;
    left: auto;
    right: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}

.serviceBox:before {
    top: -3px;
}

.serviceBox:after {
    bottom: -3px;
}

.serviceBox:hover:before,
.serviceBox:hover:after {
    left: 40px;
    opacity: 1;
}

.serviceBox.rtl:hover:before,
.serviceBox.rtl:hover:after {
    left: auto;
    right: 40px;
    opacity: 1;
}

.serviceBox .service-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 33%;
    left: 23px;
    font-size: 45px;
    color: var(--secondary-color);
    transition: all 0.5s ease-in 0s;
}

.serviceBox.rtl .service-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 33%;
    left: auto;
    right: 23px;
    font-size: 45px;
    color: var(--secondary-color);
    transition: all 0.5s ease-in 0s;
}

.serviceBox .service-icon img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    object-position: center;
}

.serviceBox:hover .service-icon {
    opacity: 1;
}

.serviceBox .title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.serviceBox .description {
    font-size: 13px;
    color: #666;
    line-height: 20px;
}

/* ================= */
.post-slide {
    background: #fff;
}

.post-slide .post-img {
    position: relative;
}

.post-slide .over-layer {
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: all 0.30s ease 0s;
}

.post-slide:hover .over-layer {
    opacity: 1;
}

.post-slide .over-layer:after {
    content: "\f0c1";
    font-size: 22px;
    font-family: "Font Awesome 6 Pro";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.post-slide .post-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
}

.post-slide .post-title:before {
    content: "";
    border: 1px solid var(--secondary-color);
    width: 18%;
    display: block;
    margin-bottom: 15px;
}

.post-slide .post-date {
    text-transform: capitalize;
}

.post-slide .post-date:before {
    content: "\f073";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 7px;
    color: var(--secondary-color);
}

/* ============================== */

.pricingTable {
    position: relative;
    z-index: 1;
}

.pricingTable .price-value .amount {
    font-size: 40px;
    font-weight: 600;
}

.pricingTable .price-value .duration {
    font-size: 15px;
    text-transform: capitalize;
}

.pricingTable .pricing-content {
    /* text-align: left; */
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
    display: inline-block;
}

.pricingTable .pricing-content li {
    color: #272727;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    padding: 8px 0px 8px 35px;
    position: relative;
}

.pricingTable .pricing-content.rtl li {
    color: #272727;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    padding: 8px 35px 8px 0px;
    position: relative;
}

.pricingTable .pricing-content li:last-child {
    border-bottom: none;
}

.pricingTable .pricing-content li:before {
    content: "\f058";
    color: #1CD07A;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    top: 9px;
    left: 0;
}

.pricingTable .pricing-content.rtl li:before {
    content: "\f058";
    color: #1CD07A;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    top: 9px;
    left: auto;
    right: 0;
}


.buy-plan {
    background-color: var(--bs-dark);
}

.theme-btn:before {
    transition-duration: .8s;
    position: absolute;
    width: 210%;
    height: 290%;
    content: "";
    top: 162%;
    left: 50%;
    background: var(--secondary-color);
    -webkit-transform: translateX(-50%);
    transform: translate(-50%) rotate(-8deg);
    border-radius: 80%;
    z-index: -1;
}

.theme-btn.style5 {
    display: block;
    background-color: #282c32;
}

.theme-btn.style5 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #282c32 !important;
    color: #fff;
}

.theme-btn {
    display: inline-block;
    position: relative;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: var(--secondary-color);
    z-index: 1;
    line-height: 1;
    overflow: hidden;
    border: none;
    transition: all .3s ease-in-out;
}

.theme-btn:hover:before {
    top: -96%;
}

.theme-btn.style5:before {
    transition-duration: .8s;
    background: var(--secondary-color);
}

.text_truncation2 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.testimonial-12 {
    margin: 0 15px;
    overflow: hidden;
}

.testimonial-12 .description {
    position: relative;
    font-size: 13px;
    line-height: 26px;
    color: #000;
    background-color: #fff;
    padding: 30px 20px;
    border: 1px solid #767070;
    border-left: 3px solid var(--secondary-color);
}

.testimonial-12 .description.rtl {
    position: relative;
    font-size: 13px;
    line-height: 26px;
    color: #000;
    background-color: #fff;
    padding: 30px 20px;
    border: 1px solid #767070;
    border-left: 1px solid #767070;
    border-right: 3px solid var(--secondary-color);
}

.testimonial-12 .description.rtl:after {
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    border-bottom: 1px solid #767070;
    border-left: none;
    border-right: 1px solid #767070;
    position: absolute;
    bottom: -11px;
    left: unset;
    right: 65px;
    transform: skewY(45deg);
}

.testimonial-12 .description:after {
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    border-bottom: 1px solid #767070;
    border-left: 1px solid #767070;
    position: absolute;
    bottom: -11px;
    left: 65px;
    transform: skewY(-45deg);
}

.testimonial-12 .pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 28px 30px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--secondary-color);
}

.testimonial-12 .pic img {
    width: 65px;
    object-fit: cover;
    object-position: center;
    height: 65px;
}

.testimonial-12 .testimonial-prof {
    text-transform: capitalize;
    margin: 0 30px;
}

.testimonial-12 .testimonial-prof h4 {
    color: var(--secondary-color);
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 5px 0;
}

.testimonial-12 .testimonial-prof small {
    display: block;
    font-size: 14px;
}

.contact-box {
    border-radius: 20px;
    background: var(--secondary-color);
    /* padding: 52px 58px 52px 45px; */
}

.contact-box .widget-head {
    color: #000;
    font-size: 27px;
    /* font-style: normal; */
    font-weight: 600;
    line-height: 128.182%;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.widget-head {
    color: #FFF;
    font-size: 27px;
    /* font-style: normal; */
    font-weight: 600;
    line-height: 128.182%;
    text-transform: capitalize;
    margin-bottom: 10px;
}


.contact-box .text {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 157.4%;
}

.contact-box .subtitle {
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.list-area li a {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 267.5%;
    text-transform: capitalize;
}

.smartphone {
    position: relative;
    width: 364px;
    height: calc(100vh - 60px);
    margin: auto;
    border: 2px rgb(0, 0, 0) solid;
    border-top-width: 50px;
    border-bottom-width: 50px;
    border-radius: 36px;
}

/* The horizontal line on the top of the device */
.smartphone:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #a5a5a5;
    border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -60px;
    transform: translate(-50%, -50%);
    background: #a5a5a5;
    border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone .content {
    width: 100%;
    height: 100%;
    background: white;
}

.h-100vh {
    height: 100vh;
}

.logo-h-45-px {
    height: 65px;
    width: fit-content;
}

.custom-padding {
    padding: 30px 0px;
}

.bg-gradient-color2 {
    background: linear-gradient(180deg, var(--bs-primary-rgb-2) 0%, var(--bs-secondary-rgb-2) 100%) !important;
}

/* ========================================== */

.arrow {
    position: absolute;
    bottom: 50%;
    top: 50%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    height: 20%;
}

.arrow__body {
    height: 95%;
    margin: 0px;
    border-width: 10px 0 0;
    border-style: dashed;
    border-color: var(--primary-color);
    border-top-left-radius: 100%;
    transform: rotateZ(360deg);
}

.arrow__body::after {
    content: '';
    position: absolute;
    top: -15px;
    right: -12px;
    border-width: 20px 15px 0;
    border-style: solid;
    border-color: var(--primary-color) transparent transparent;
    transform: rotate(-90deg);
}

.arrow__body::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--secondary-color) !important;
}

.lag-btn .dropdown-menu {
    --bs-dropdown-min-width: 8rem !important;
    /* padding: 0px 0px !important; */
    font-size: 12px !important;
    overflow: hidden !important;
}

.header .min-dropdown-ltr {
    position: absolute !important;
    left: -100px !important;
    /* top: 100% !important; */
    font-size: 12px !important;
}

.header .min-dropdowns-ltr {
    position: absolute !important;
    /* left: -100px !important; */
    /* top: 100% !important; */
    font-size: 12px !important;
}

.header .min-dropdown-rtl {
    position: absolute !important;
    left: 0px !important;
    /* top: 100% !important; */
    font-size: 12px !important;
}

#offcanvaslanding {
    z-index: 9999999999999 !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--bs-dropdown-link-active-color) !important;
    text-decoration: none;
    background-color: var(--secondary-color) !important;
}

.box {
    --size: 52px;
    --line: #ffffff16;
    content: '';
    height: 100vh;
    width: 100%;
    position: absolute;
    background: linear-gradient(90deg,
            var(--line) 1px,
            transparent 1px var(--size)) 50% 50% / var(--size) var(--size),
        linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
    mask: linear-gradient(180deg, transparent 3%, white 30%, transparent 100%);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
}

.btn-light {
    padding: 13px 34px;
    border: 1px solid #fff;
    color: #000 !important;
    background-color: #ffff !important;
}

/* ===================================================================== */

.counter {
    color: var(--primary-color);
    background: #ffffff;
    text-align: center;
    width: 200px;
    height: 200px;
    padding: 16px 12px;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}


.counter:before,
.counter:after,
.counter .counter-icon:before {
    content: "";
    background: #ffffff00;
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    border-radius: 50% 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.counter:after {
    background: transparent;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    box-shadow: none;
}

.counter .counter-icon:before {
    background: transparent;
    width: calc(100% - 25px);
    height: calc(100% - 25px);
    border: 2px dashed var(--primary-color);
    box-shadow: none;
}

.counter .counter-icon {
    color: var(--secondary-color);
    font-size: 28px;
}

.counter h3 {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.counter .counter-value {
    color: var(--secondary-color);
    font-size: 35px;
    font-weight: 700;
}

/* ================================= light and dark mode ======================== */
/* Light mode */
.light body {
    background-color: #ffffff;
    color: #000000;
}

.light body .store_bg_changer {
    background-color: #000000;
}

/* Dark mode */
.dark body {
    background-color: #0B0F19;
}

.dark body .color-changer {
    color: #FFF !important;
}

.dark body .text-muted {
    --bs-text-opacity: 1;
    color: #a0a0a0 !important;
}

.dark body .btn-border-dark,
.dark body .btn-border-dark:active {
    border: 1px solid #ffffff;
    color: #ffffff !important;
}

.dark body .card {
    border: 1px solid #2a2c34 !important;
    background-color: #1E212B !important;
}

.dark body .bg-changer {
    background-color: #151822 !important;
}

.dark body .serviceBox .title {
    color: var(--secondary-color);
}

.dark body .card.serviceBox:hover {
    box-shadow: var(--bs-box-shadow);
    border-color: var(--secondary-color) !important;
}

.dark body .serviceBox:before,
.dark body .serviceBox:after {
    background: var(--secondary-color);
}

.dark body .serviceBox.rtl:before,
.dark body .serviceBox.rtl:after {
    background: var(--secondary-color);
}

.dark body .card.them-card-box {
    background-color: transparent !important;
    border-color: transparent !important;
}

.dark body .store_bg_changer {
    background-color: var(--secondary-color) !important;
}

.dark body .testimonial-12 .description,
.dark body .testimonial-12 .description.rtl {
    background-color: #1E212B;
}

.dark body .testimonial-12 .description:after,
.dark body .testimonial-12 .description.rtl:after {
    background: #1E212B;
}

.dark body .post-slide.card {
    border: 1px solid transparent !important;
    background-color: transparent !important;
}

.dark body .form-label,
.dark body .form-check-label {
    color: #c7c7c7 !important;
}

.dark body .form-control,
.dark body .form-select,
.dark body select {
    background-color: #272727 !important;
    color: #aab8c5 !important;
    border-color: #464f5b !important
}

.dark body ::placeholder {
    color: #aab8c5 !important;
    opacity: 1;
    /* Firefox */
}

.dark body ::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: #aab8c5 !important;
}

.dark body .card.rgb-secondary-light {
    background-color:
        color-mix(in srgb, var(--secondary-color), transparent 50%) !important;
}

.rgb-secondary-light {
    background-color: color-mix(in srgb, var(--secondary-color), transparent 80%) !important;
}

.dark body .counter {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--secondary-color), transparent 80%) !important;
    border-color: #FFF;
}

.dark body .counter .counter-icon:before {
    border: 2px dashed var(--secondary-color);
}

.dark body .counter h3 {
    color: #FFF;
}

.dark body .counter:before,
.dark body .counter .counter-icon:before {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.19);
}

.cms-section p {
    font-size: 14px !important;
}

.dark body .cms-section p {
    color: #FFF;
}

.dark body .breadcrumb-item+.breadcrumb-item::before {
    color: #FFF !important;
}

.dark body .faq-btn-bg {
    background-color: #151822;
}

.dark body .active>.page-link,
.dark body .page-link.active {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #d2d2d2 !important;
}

.accordion-item {
    background-color: #fff;
    color: #111;
    border-radius: 0.5rem;
    border: 0;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.accordion-button:focus {
    z-index: 3;
    border-color: var(--bs-accordion-btn-focus-border-color);
    outline: 0;
    box-shadow: none !important;
}

.faq .accordion-button:not(.collapsed)::after {
    background-image: none !important;
    transform: rotate(0deg) !important;
    margin: 0;
}

.accordion-button::after {
    background-image: none !important;
}

.faq .accordion-button::after {
    content: "\2212";
    font-size: 22px;
    right: 1rem;
    font-weight: 400;
}

.faq .accordion-button::after {
    background-image: none;
    display: flex;
    align-items: center;
}

.faq .accordion-button::after {
    width: 10px;
    height: 10px;
    background-position: center;
}

.faq .accordion-button.collapsed::after {
    content: "\002B";
    margin: 0;
}

.cursor-pointer {
    cursor: pointer;
}

.dark body .modal .modal-content {
  background-color: #242930 !important;
}

.dark body .modal-footer,
.dark body .modal-header {
  border-color: #4a4a4a !important;
}

.dark body .modal {
  background-color: #1818186c !important;
}

/* ============================================================
   Projeto Fusão-01 · Fase 5, Ronda 5.1 - só o essencial para o
   cartão de serviço do portal marketplace não ficar com aspeto
   quebrado (imagem sem altura definida, badge sem posição). O
   resto do polimento visual (paleta, tipografia) fica para a
   Ronda 5.4, quando o layout for alinhado ao resto do site.
   ============================================================ */
.marketplace-service-card {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.marketplace-service-card:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.marketplace-service-img {
  height: 180px;
}
.marketplace-category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
}

/* Projeto Fusão-01, Fase 5 - cartão de serviço horizontal (foto | conteúdo),
   mesmo formato exato do FixMate ("Explore Top Services"): 2 por linha.
   Projeto Fusão-04 - variante vertical (foto grande em cima) só na
   página /stores, via modificador ".mp-card-vertical" mais abaixo - este
   bloco base continua horizontal, usado pela home. */
.mp-services-grid {
  --bs-gutter-y: 2rem;
  row-gap: 32px;
}
.mp-service-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
}
.mp-service-card:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.mp-service-img-wrap {
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  background: #f2f2f2;
  border-radius: 14px;
  /* sem overflow:hidden aqui de propósito - o "Saiba Mais" tem de ficar
     a cavalo do fundo da imagem (metade dentro, metade fora), por isso
     não pode ser cortado por este contentor. */
}
/* Projeto Fusão-04 - "object-fit: cover" (igual ao FixMate,
   ".service-card-image img", medido diretamente no código ao vivo) -
   a foto preenche sempre o quadro todo, sem sobrar espaço vazio.
   "object-position: center center" - valor definido explicitamente. */
.mp-service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Projeto Fusão-04 - "Saiba Mais" (pílula amarela sobre a imagem do
   cartão): estava fixa de borda a borda (left:15px; right:15px), mais
   estreita do que o avatar+texto juntos em cartões estreitos (grelha de
   4 colunas) - o avatar ficava meio cortado para fora da pílula
   ("estourando"). Passa a encolher ao conteúdo, sempre centrada, sem
   nunca ultrapassar a largura do cartão. */
.mp-service-pill {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 45%);
  max-width: calc(100% - 30px);
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--secondary-color);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--secondary-color), transparent 60%);
}
.mp-service-pill:hover {
  color: #fff;
  filter: brightness(1.05);
}
/* Projeto Fusão-04 - nome da loja em cima da imagem (topo direito, para
   não colidir com o selo de "Serviços/Produtos em Destaque" que ocupa o
   topo esquerdo) - substitui a inicial que estava dentro do botão
   "Saiba Mais" (pedido explícito, pouco claro o que representava). */
.mp-service-vendor-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  background: color-mix(in srgb, var(--color-white, #fff), transparent 8%);
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-service-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 6px 6px 6px 0;
  min-width: 0;
}
.mp-service-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 6px;
}
.mp-service-rating .fa-star {
  color: #ffb400;
  font-size: 11px;
}
.mp-service-rating .fa-star.mp-star-empty {
  color: #e0e0e0;
}
.mp-service-title {
  font-family: var(--mp-heading-font);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-service-content .marketplace-category-badge {
  position: static;
  display: inline-block;
  background: color-mix(in srgb, var(--secondary-color), transparent 88%);
  color: var(--secondary-color);
  border-radius: 100px;
  width: fit-content;
  margin-bottom: auto;
}
.mp-service-footer {
  margin-top: 10px;
  font-size: 12px;
  color: #777;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-service-footer i {
  color: var(--secondary-color);
}
/* Projeto Fusão-01 · Fase 5, Ronda 5.5 - "Agendar Agora" dos painéis
   promocionais (marketplace-panels.blade.php) substitui a linha estática
   de contagem de serviços do mp-service-footer por um CTA real, já que
   aqui o clique leva direto ao wizard de reserva. */
.mp-panel-book-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary-color);
  color: var(--color-white) !important;
  border-radius: 100px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter 0.3s;
}
.mp-panel-book-btn:hover {
  filter: brightness(1.08);
}
/* Projeto Fusão-02 - "Serviços em Destaque" (admin/marketplace/spotlights):
   selo opcional sobre a foto + mensagem opcional a substituir a categoria. */
.mp-service-spotlight-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: var(--secondary-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}
.mp-service-spotlight-message {
  font-size: 13px;
  margin-bottom: auto;
}

@media (max-width: 575.98px) {
  .mp-service-card {
    flex-direction: column;
  }
  .mp-service-img-wrap {
    max-width: 100%;
    flex-basis: auto;
  }
  .mp-service-img {
    min-height: 160px;
  }
}

/* Projeto Fusão-02 - "Inverter Lateral" (admin/marketplace/section-order):
   troca a foto para o lado direito do cartão. Só acima do breakpoint em que
   o cartão já é mesmo horizontal (abaixo disso empilha na vertical, ver
   regra acima, e inverter não faria sentido). */
@media (min-width: 576px) {
  .mp-service-card.mp-flip {
    flex-direction: row-reverse;
  }
  .mp-service-card.mp-flip .mp-service-content {
    padding: 6px 0 6px 6px;
  }
}

/* Projeto Fusão-02 - "Produtos Populares", cartão de produto horizontal
   (foto | conteúdo) - mesma disposição exata do cartão de serviço acima,
   duplicada com classes próprias (não partilhadas) para poder evoluir/
   estilizar cada secção de forma independente no futuro. */
.mp-products-grid {
  --bs-gutter-y: 2rem;
  row-gap: 32px;
}
.mp-product-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
}
.mp-product-card:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.mp-product-img-wrap {
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  background: #f2f2f2;
  border-radius: 14px;
}
.mp-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Projeto Fusão-04 - mesmo ajuste do .mp-service-pill acima (pílula
   "Saiba Mais" a encolher ao conteúdo, sem estourar a largura do
   cartão). */
.mp-product-pill {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 45%);
  max-width: calc(100% - 30px);
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--secondary-color);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--secondary-color), transparent 60%);
}
.mp-product-pill:hover {
  color: #fff;
  filter: brightness(1.05);
}
.mp-product-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 6px 6px 6px 0;
  min-width: 0;
}
.mp-product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 6px;
}
.mp-product-rating .fa-star {
  color: #ffb400;
  font-size: 11px;
}
.mp-product-rating .fa-star.mp-star-empty {
  color: #e0e0e0;
}
.mp-product-title {
  font-family: var(--mp-heading-font);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-product-price {
  font-family: var(--mp-heading-font);
  font-size: 17px;
  font-weight: 800;
  color: var(--secondary-color);
}
.mp-product-content .marketplace-category-badge {
  position: static;
  display: inline-block;
  background: color-mix(in srgb, var(--secondary-color), transparent 88%);
  color: var(--secondary-color);
  border-radius: 100px;
}
.mp-product-footer {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: #777;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-product-footer i {
  color: var(--secondary-color);
}

@media (max-width: 575.98px) {
  .mp-product-card {
    flex-direction: column;
  }
  .mp-product-img-wrap {
    max-width: 100%;
    flex-basis: auto;
  }
  .mp-product-img {
    min-height: 160px;
  }
}

/* Projeto Fusão-04 - variante vertical (foto grande em cima, largura
   toda do cartão), só na página /stores ("Serviços e Produtos", pedido
   explícito "igual ao fixmate... fotos maiores") - ativada por
   ['cardVertical' => true] no @include de topservices/topproducts (ver
   landing/stores.blade.php). A HOME mantém os cartões horizontais
   originais acima, incluindo "Inverter Lateral" em "Explore os Nossos
   Serviços" - pedido explícito para não mexer nas outras páginas. */
.mp-service-card.mp-card-vertical,
.mp-product-card.mp-card-vertical {
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.mp-service-card.mp-card-vertical .mp-service-img-wrap,
.mp-product-card.mp-card-vertical .mp-product-img-wrap {
  flex: none;
  width: 100%;
  max-width: 100%;
  height: 200px;
  overflow: hidden;
  /* Projeto Fusão-04 - sem arredondar aqui: o cartão inteiro já corta
     os cantos (.mp-card-vertical, overflow:hidden + border-radius:18px)
     - manter os 14px do quadro base (pensado para a versão horizontal,
     onde a foto é uma caixa independente) criava um recorte redondo a
     mais, a meio do cartão, onde a imagem encontra o conteúdo. */
  border-radius: 0;
}
.mp-service-card.mp-card-vertical .mp-service-img,
.mp-product-card.mp-card-vertical .mp-product-img {
  min-height: 0;
  border-radius: 0;
}
.mp-service-card.mp-card-vertical .mp-service-content,
.mp-product-card.mp-card-vertical .mp-product-content {
  padding: 20px;
}
.mp-service-card.mp-card-vertical .mp-service-pill,
.mp-product-card.mp-card-vertical .mp-product-pill {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin-top: 16px;
  box-shadow: none;
}
@media (max-width: 575.98px) {
  .mp-service-card.mp-card-vertical .mp-service-img-wrap,
  .mp-product-card.mp-card-vertical .mp-product-img-wrap {
    height: 180px;
  }
}

/* ============================================================
   Projeto Fusão-01 · Fase 5, Ronda 5.2 - "Categorias Principais"
   e "Porque Nos Escolher", novas na home do portal marketplace.
   Mesma disciplina da Ronda 5.1: essencial para não ficar com
   aspeto quebrado, paleta/tipografia completas ficam para quando
   o resto da home (dobra a dobra) estiver feito.
   ============================================================ */
.mp-eyebrow {
  color: var(--secondary-color);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.mp-section-title {
  font-family: var(--mp-heading-font);
  color: #0e1035;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  margin: 8px 0 0;
}
/* Projeto Fusão-02 - espaço entre dobras do portal marketplace,
   uniformizado (antes: 60px/90px+85px/80px, tudo diferente, e "Explore
   os Nossos Melhores Produtos" não tinha nenhum - ficava colado a
   "Explore os Nossos Serviços"). Mesmo valor em todas as dobras, desktop
   e mobile (breakpoint igual ao já usado no resto da página, 767.98px).
   Projeto Fusão-04 - aumentado de 80px/48px para 96px/56px (pedido
   explícito - as dobras novas desta sessão tinham ficado com sensação de
   "compactado") e "#paid-spotlight" (Serviços em Destaque pago)
   acrescentado à lista - tinha ficado de fora, sem nenhum espaçamento
   próprio, uma das causas reais da discrepância notada.
   Projeto Fusão-04 - "section[id^='marketplace-panel-']" (Painéis
   Promocionais, ex.: "Destaques da Power3") NÃO entra nesta lista de
   propósito - com 2+ painéis ativos ao mesmo tempo, 96px entre cada um
   ficava espaço a mais (pedido explícito); tem a sua própria regra,
   mais abaixo, com um espaço mais pequeno entre painéis. */
#marketplace-categories,
#explore-services,
#explore-products,
#our-stores,
#nossas-lojas,
#nuestras-tiendas,
#marketplace-how-it-works,
#marketplace-why-choose-us,
#marketplace-testimonials,
#marketplace-best-service-platform,
#marketplace-blog,
#paid-spotlight,
#about-who,
#about-features,
#about-stats-icons,
#about-testimonial {
  padding: 96px 0;
}
@media (max-width: 767.98px) {
  #marketplace-categories,
  #explore-services,
  #explore-products,
  #our-stores,
#nossas-lojas,
#nuestras-tiendas,
  #marketplace-how-it-works,
  #marketplace-why-choose-us,
  #marketplace-testimonials,
  #marketplace-best-service-platform,
  #marketplace-blog,
  #paid-spotlight,
  #about-who,
  #about-features,
  #about-stats-icons,
  #about-testimonial {
    padding: 56px 0;
  }
}

/* Projeto Fusão-04 - "Perguntas Frequentes": #faq-intro e #faq-questions
   são 2 dobras consecutivas, sem nenhuma outra dobra entre elas - dar a
   ambas o padding simétrico de cima (como as outras dobras da lista
   acima) somava 192px de espaço vazio só entre estas duas (o dobro do
   espaço antes da 1ª dobra e depois da 2ª). Pedido explícito: espaço
   uniforme de 96px/56px em TODOS os espaços visíveis da página -
   #faq-intro perde o padding de baixo (fica só em cima), #faq-questions
   mantém o padding completo (o de cima dela já é o único espaço entre
   as duas dobras). */
#faq-intro {
  padding: 96px 0 0;
}
#faq-questions {
  padding: 96px 0;
}
@media (max-width: 767.98px) {
  #faq-intro {
    padding: 56px 0 0;
  }
  #faq-questions {
    padding: 56px 0;
  }
}

/* Projeto Fusão-04 - Painéis Promocionais (ex.: "Destaques da Power3")
   ficavam colados uns aos outros quando há 2+ ativos ao mesmo tempo -
   ID de cada painel é dinâmico, por isso tem regra própria, separada
   da lista partilhada acima. 96px (o valor das outras dobras) ficava
   espaço a mais entre painéis - pedido explícito para usar o mesmo
   espaço já usado ENTRE LINHAS dentro de "Explore os Nossos Serviços"
   (".mp-services-grid { row-gap: 32px }"), não o espaço entre dobras. */
section[id^="marketplace-panel-"] {
  padding: 32px 0;
}

/* Projeto Fusão-02 - "Testemunhos", medido diretamente no código do
   FixMate ("What Our Clients Say"): cartão branco, cantos bem
   arredondados, sombra suave, citação em itálico, avatar + nome + cargo. */
.mp-testimonials-header {
  margin-bottom: 40px;
}
.mp-testimonials-slider .owl-stage-outer {
  padding: 6px 0 20px;
}
.mp-testimonial-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  border: 1px solid #f5f5f5;
  height: 100%;
}
.mp-testimonial-stars {
  margin-bottom: 20px;
}
.mp-testimonial-stars .fa-star {
  color: #ffc107;
  font-size: 16px;
}
.mp-testimonial-stars .fa-star.mp-star-empty {
  color: #e0e0e0;
}
.mp-testimonial-text {
  font-size: 16px;
  color: #555;
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 30px;
}
.mp-testimonial-client {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mp-testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}
.mp-testimonial-name {
  font-family: var(--mp-heading-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--secondary-color);
  margin: 0 0 2px;
}
.mp-testimonial-role {
  font-size: 14px;
  color: #888;
}
.mp-testimonials-slider .owl-dots .owl-dot span {
  background: color-mix(in srgb, var(--secondary-color), transparent 75%);
}
.mp-testimonials-slider .owl-dots .owl-dot.active span {
  background: var(--secondary-color);
}
.mp-partner-callout {
  background: color-mix(in srgb, var(--secondary-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--secondary-color), transparent 80%);
  border-radius: 16px;
  padding: 28px 20px;
}
.mp-partner-callout p {
  font-size: 32px;
  line-height: 1.3;
}
.mp-category-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mp-category-card:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.mp-category-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--secondary-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-category-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-category-icon i {
  color: var(--secondary-color);
  font-size: 18px;
}
.mp-category-name {
  font-weight: 600;
  font-size: 14px;
  color: inherit;
}
.mp-categories-center-img {
  text-align: center;
}
.mp-categories-center-img img {
  width: 100%;
  max-width: 340px;
  border-radius: 24px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.mp-categories-help {
  margin-top: 40px;
}

/* Projeto Fusão-01, Fase 5 - botões de chamada (Explorar Tudo/Ver Tudo/
   Visualizar Todos/Saiba Mais), tamanho medido diretamente no FixMate
   (16px/700, mais preenchimento) - a classe "fs-7" do tema fixa 14px
   sempre com !important, por isso estes botões não cresciam em ecrãs
   maiores. Em telas pequenas, a media query no fim deste ficheiro
   reduz de novo, como já acontecia antes. */
.mp-btn-cta {
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
}
@media (max-width: 575.98px) {
  .mp-btn-cta {
    font-size: 14px !important;
    padding: 12px 22px !important;
  }
}
.mp-categories-help-text {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}

/* Espaço entre o mosaico de fotos e o texto ao lado - pedido para
   redobrar outra vez (24px -> 48px -> 96px), só nesta secção. */
.mp-why-choose-row {
  --bs-gutter-x: 6rem;
}
@media (max-width: 991.98px) {
  .mp-why-choose-row {
    --bs-gutter-x: 1.5rem;
  }
}
/* Mosaico medido diretamente no FixMate: grelha 2x2, colunas iguais,
   linha de cima maior que a de baixo (rácio ~240:200), item de baixo
   ocupa as 2 colunas - 20px de espaço entre fotos. Projeto Fusão-03 -
   com controlo direto do superadmin sobre as 3 posições
   (why_choose_mosaic_1/2/3), passa a ser normal ter só 1 ou 2 fotos por
   escolha, não só por falta de dados - por isso mp-mosaic-1/2 adaptam a
   grelha em todas as larguras, não só em mobile. */
.mp-why-choose-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.2fr 1fr;
  gap: 20px;
  height: 460px;
}
.mp-why-choose-mosaic.mp-mosaic-2 {
  grid-template-rows: 1fr;
}
.mp-why-choose-mosaic.mp-mosaic-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
/* Projeto Fusão-04 - variante só da página "Sobre Nós": foto alta (2
   linhas) + foto + quadro de destaque (número/legenda) + foto larga em
   baixo, igual ao mosaico do FixMate ("25+ Years of Quality"). */
.mp-why-choose-mosaic.mp-mosaic-with-stat {
  height: 560px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 160px;
}
.mp-why-choose-mosaic.mp-mosaic-with-stat .mp-why-choose-grid-item:nth-child(1) {
  grid-row: 1 / 3;
}
.mp-why-choose-mosaic.mp-mosaic-with-stat .mp-why-choose-grid-item:nth-child(4) {
  grid-column: 1 / 3;
}
.mp-why-choose-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: color-mix(in srgb, var(--secondary-color), transparent 85%);
}
.mp-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 4px;
}
.mp-stat-label {
  font-size: 0.85rem;
  color: #6c757d;
}
.mp-why-choose-grid-item {
  overflow: hidden;
  border-radius: 12px;
}
/* Projeto Fusão-04 - fundo cinza claro só nas células com foto (não no
   quadro de destaque número/legenda, que já tem o seu próprio fundo) -
   preenche o espaço que sobra com "object-fit: contain" abaixo. */
.mp-why-choose-grid-item:not(.mp-why-choose-stat-tile) {
  background: #f2f2f2;
}
.mp-why-choose-mosaic:not(.mp-mosaic-1):not(.mp-mosaic-2):not(.mp-mosaic-with-stat) .mp-why-choose-grid-item:nth-child(3) {
  grid-column: 1 / 3;
}
.mp-why-choose-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.mp-why-choose-list {
  margin: 24px 0;
}
.mp-why-choose-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
}
.mp-why-choose-list li i {
  color: #c04f18;
  font-size: 15px;
}
.mp-why-choose-cta {
  display: inline-block;
  background: var(--secondary-color);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 18px 45px;
  border-radius: 12px;
  text-decoration: none;
}
.mp-why-choose-cta:hover {
  color: #fff;
  filter: brightness(1.05);
}

@media (max-width: 991.98px) {
  .mp-why-choose-mosaic.mp-mosaic-with-stat {
    height: 420px;
  }
}

@media (max-width: 767.98px) {
  .mp-categories-center-img {
    order: -1;
    margin-bottom: 1rem;
  }
  .mp-why-choose-mosaic {
    height: 320px;
  }
  /* Projeto Fusão-02 - só 2 fotos elegíveis (em vez das 3 que a grelha
     espera) deixava a 2ª linha vazia, um espaço grande antes do título
     quando a coluna do mosaico empilha por cima da do texto. Passa para
     1 única linha com as 2 fotos lado a lado, sem espaço vazio.
     Projeto Fusão-03 - mesma lógica para 1 só foto. */
  .mp-why-choose-mosaic.mp-mosaic-2 {
    height: 220px;
  }
  .mp-why-choose-mosaic.mp-mosaic-1 {
    height: 260px;
  }
  /* Projeto Fusão-04 - o variante "com quadro de destaque" (só na página
     Sobre Nós) precisa da sua própria altura em mobile - mais específico
     que ".mp-why-choose-mosaic { height:320px }" acima, por isso sem
     este bloco ficava preso nos 560px do desktop. */
  .mp-why-choose-mosaic.mp-mosaic-with-stat {
    height: 360px;
    grid-template-rows: 1fr 1fr 90px;
    gap: 12px;
  }
  .mp-stat-number {
    font-size: 1.4rem;
  }
  .mp-stat-label {
    font-size: 0.7rem;
  }
}

/* Projeto Fusão-02 - "Inverter Lateral" (admin/marketplace/section-order),
   só acima dos breakpoints onde cada dobra já é mesmo esquerda/direita (por
   baixo disso as colunas empilham na vertical e inverter não muda nada). */
@media (min-width: 992px) {
  .mp-categories-grid.mp-flip {
    flex-direction: row-reverse;
  }
  .mp-why-choose-row.mp-flip {
    flex-direction: row-reverse;
  }
}

.mp-why-choose-img-placeholder {
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--secondary-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-why-choose-img-placeholder i {
  font-size: 64px;
  color: var(--secondary-color);
  opacity: 0.6;
}

/* Projeto Fusão-01, Fase 5 - "Como Funciona", medido diretamente no
   FixMate: círculo branco 100x100 com sombra suave (não tingido),
   ícone e título na cor de destaque escura (#c04f18), selo do passo
   35x35 encostado ao canto superior direito do círculo. */
.mp-how-step {
  text-align: center;
  padding: 0 10px;
}
.mp-how-step-icon {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-how-step-icon i {
  font-size: 32px;
  color: #c04f18;
}
.mp-how-step-number {
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--secondary-color);
  color: #c04f18;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-how-step-title {
  font-family: var(--mp-heading-font);
  font-size: 20px;
  font-weight: 700;
  color: #c04f18;
  margin-bottom: 8px;
}
.mp-how-step-desc {
  font-size: 15px;
  color: #666;
}

/* Projeto Fusão-01, Fase 5 - barra de pesquisa do hero (estilo "Find
   Service" do FixMate) e cartões flutuantes sobre a imagem do banner. */
.mp-hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border-radius: 100px;
  padding: 10px 10px 10px 24px;
  max-width: 560px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.mp-hero-search i {
  color: #9a9a9a;
  font-size: 16px;
}
.mp-hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font-family: var(--font-family);
  font-size: 15px;
  color: #333;
  background: transparent;
}
.mp-hero-search input::placeholder {
  color: #9a9a9a;
}
.mp-hero-search .btn-secondary {
  background: var(--secondary-color);
  border: 0;
  border-radius: 100px !important;
  color: var(--color-white);
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 32px !important;
  white-space: nowrap;
}

.mp-hero {
  padding: 90px 0 70px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-color), white 92%) 0%, var(--color-white) 100%);
  overflow: visible;
}
.mp-hero-grid {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.mp-hero-col-text {
  flex: 1 1 420px;
  min-width: 320px;
}
.mp-hero-col-image {
  flex: 1 1 380px;
  min-width: 280px;
}
.mp-hero-title {
  font-family: var(--mp-heading-font);
  font-size: 56px;
  font-weight: 800;
  line-height: 1.15;
  color: #1a1a1a;
  margin-bottom: 18px;
}
.mp-hero-desc {
  font-size: 18px;
  color: #666;
  max-width: 480px;
  margin-bottom: 30px;
}
/* Projeto Fusão-02 - selo "Novo" + chamada curta acima do título, medido
   diretamente no código do FixMate (badge + texto muted a negrito). */
.mp-hero-badge-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.mp-hero-badge {
  background: var(--secondary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 50px;
  margin-right: 10px;
  white-space: nowrap;
}
.mp-hero-badge-text {
  font-size: 14px;
  font-weight: 700;
  color: #666;
}
/* Projeto Fusão-02 - "Tendência" com categorias reais em alta, abaixo da
   pesquisa, medido diretamente no código do FixMate (.hero-trending). */
.mp-hero-trending {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.mp-hero-trending-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary-color);
  margin-right: 4px;
}
.mp-hero-trending-chip {
  font-size: 12px;
  color: #5e6282;
  background: #fff;
  padding: 6px 15px;
  border-radius: 50px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.mp-hero-trending-chip:hover {
  color: #5e6282;
  border-color: color-mix(in srgb, var(--secondary-color), transparent 40%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
.mp-hero-image-wrap {
  display: block;
  max-width: 460px;
  margin: 0 auto;
}
.mp-hero-img {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

@media (max-width: 991.98px) {
  .mp-hero {
    padding: 60px 0 50px;
    text-align: center;
  }
  .mp-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .mp-hero-search {
    margin-left: auto;
    margin-right: auto;
  }
  .mp-hero-image-wrap {
    margin-top: 40px;
  }
  .mp-hero-badge-row,
  .mp-hero-trending {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .mp-hero-title {
    font-size: 34px;
  }
  .mp-section-title {
    font-size: 30px;
  }
}
.mp-hero-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  text-align: left;
  z-index: 2;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.mp-hero-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  color: inherit;
}
.mp-hero-float i {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--secondary-color), transparent 85%);
  color: var(--secondary-color);
  font-size: 16px;
}
.mp-hero-float strong {
  display: block;
  font-family: var(--font-family);
  font-size: 18px;
  color: #222;
  line-height: 1.2;
}
.mp-hero-float span {
  display: block;
  font-size: 12px;
  color: #777;
}
.mp-hero-float-partners {
  left: -24px;
  bottom: 30px;
}
.mp-hero-float-rating {
  right: -16px;
  top: 30px;
  padding: 10px 18px;
}
.mp-hero-float-rating i {
  background: color-mix(in srgb, #ffb400, transparent 80%);
  color: #ffb400;
}
.mp-hero-float-rating span {
  font-size: 13px;
  color: #333;
  font-weight: 600;
}
.mp-hero-float-services {
  left: -20px;
  top: 45%;
  transform: translateY(-50%);
  padding: 10px 16px;
}
.mp-hero-float-services:hover {
  transform: translateY(-50%) translateY(-3px);
}
.mp-hero-float-services i {
  background: color-mix(in srgb, #34a853, transparent 85%);
  color: #34a853;
}

@media (max-width: 767.98px) {
  .mp-hero-search {
    max-width: 100%;
    padding-left: 16px;
  }
  .mp-hero-search .btn-secondary {
    padding: 10px 16px;
  }
  .mp-hero-float {
    padding: 10px 14px;
  }
  .mp-hero-float-partners {
    left: 8px;
    bottom: 12px;
  }
  .mp-hero-float-rating {
    right: 8px;
    top: 12px;
  }
  .mp-hero-float-services {
    left: 8px;
    top: 50%;
  }
}

/* Projeto Fusão-03 - "Melhor Plataforma de Serviços", medido diretamente no
   código do FixMate (".app-download-section-premium"): fundo em gradiente
   radial claro (mesmo espírito do banner principal), selo branco em pílula,
   título/descrição centrados, imagem larga do mockup por baixo, sobrepondo
   ligeiramente o bloco de texto (overlap negativo, como no original). */
#marketplace-best-service-platform {
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary-color), transparent 95%) 0%, color-mix(in srgb, var(--secondary-color), transparent 98%) 100%);
  position: relative;
  overflow: hidden;
}
.mp-bsp-content {
  max-width: 940px;
  margin: 0 auto;
}
.mp-bsp-badge {
  display: inline-block;
  background: #fff;
  color: var(--secondary-color);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 25px;
  border-radius: 50px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}
.mp-bsp-title {
  margin: 0 0 16px;
}
.mp-bsp-desc {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 32px;
}
/* Projeto Fusão-03 - selos de imagem (ex.: Google Play/App Store no
   FixMate), medido em ".app-store-btns"/".app-store-btn": lado a lado,
   sobem 8px e ganham sombra ao passar o rato, cada um com o seu link. */
.mp-bsp-store-btns {
  display: flex;
  gap: 20px;
  margin-bottom: 90px;
}
.mp-bsp-store-btn {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mp-bsp-store-btn:hover {
  transform: translateY(-8px);
}
.mp-bsp-store-btn img {
  height: 55px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}
@media (max-width: 575.98px) {
  .mp-bsp-store-btn img {
    height: 44px;
  }
}
.mp-bsp-image-wrap {
  margin-top: -30px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.mp-bsp-image-wrap img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}
@media (max-width: 767.98px) {
  .mp-bsp-image-wrap {
    margin-top: -16px;
  }
}

/* Projeto Fusão-03 - "Latest Updates / News & Articles", medido
   diretamente no código do FixMate (".blog-new-section"/".blog-card"):
   cartão branco, cantos arredondados, selo de data sobreposto à imagem
   (canto inferior esquerdo), meta com ícone, título, rodapé com "Ler
   Mais" + seta que desliza no hover. */
.mp-blog-header {
  margin-bottom: 50px;
}
.mp-blog-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mp-blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  border-color: var(--secondary-color);
}
.mp-blog-img-wrapper {
  height: 220px;
  position: relative;
  overflow: hidden;
}
.mp-blog-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.mp-blog-card:hover .mp-blog-img-wrapper img {
  transform: scale(1.08);
}
.mp-blog-date-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 2;
}
.mp-blog-date-day {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #0e1035;
  line-height: 1;
}
.mp-blog-date-month {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
}
.mp-blog-content {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.mp-blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #888;
}
.mp-blog-meta i {
  color: var(--secondary-color);
}
.mp-blog-title {
  font-size: 17px;
  font-weight: 800;
  color: #0e1035;
  margin-bottom: 14px;
  line-height: 1.4;
  transition: color 0.3s;
  display: block;
  text-decoration: none !important;
}
.mp-blog-title:hover {
  color: var(--secondary-color);
}
.mp-blog-card-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f5f5f5;
}
.mp-blog-read-more {
  font-weight: 700;
  color: #0e1035;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
  text-decoration: none !important;
  font-size: 14px;
}
.mp-blog-read-more:hover {
  gap: 12px;
  color: var(--secondary-color);
}
.mp-blog-view-all {
  margin-top: 40px;
}

/* Projeto Fusão-03 - páginas /blogs e /blogdetail-{slug}, medidas
   diretamente no código do FixMate (".blog_page_premium"/".blog_details_premium"):
   fundo cinza muito claro, cartões brancos com sombra suave, grelha
   2 colunas + barra lateral fixa (sticky) com pesquisa/categorias/
   artigos recentes. */
.mp-blog-page {
  background-color: #f9f9f9;
  padding: 60px 0;
}
.mp-blog-card-premium {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  transition: 0.3s;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}
.mp-blog-card-premium:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}
.mp-blog-card-img {
  height: 220px;
  overflow: hidden;
  position: relative;
}
.mp-blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.mp-blog-card-premium:hover .mp-blog-card-img img {
  transform: scale(1.05);
}
.mp-blog-date-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--secondary-color);
  color: #fff;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.mp-blog-card-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.mp-blog-card-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
}
.mp-blog-card-title a {
  color: #0e1035;
  text-decoration: none;
  transition: color 0.2s;
}
.mp-blog-card-title a:hover {
  color: var(--secondary-color);
}
.mp-blog-card-desc {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 18px;
  flex-grow: 1;
}
.mp-blog-read-more-btn {
  color: #0e1035;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: auto;
}
.mp-blog-read-more-btn:hover {
  color: var(--secondary-color);
}
.mp-blog-read-more-btn i {
  transition: transform 0.2s;
}
.mp-blog-read-more-btn:hover i {
  transform: translateX(5px);
}

/* barra lateral */
.mp-blog-sidebar-widget {
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  margin-bottom: 26px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.03);
}
.mp-blog-sidebar-title {
  font-size: 17px;
  font-weight: 800;
  color: #0e1035;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}
.mp-blog-sidebar-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 3px;
  background: var(--secondary-color);
  border-radius: 3px;
}
.mp-blog-search-form {
  position: relative;
}
.mp-blog-search-form input {
  width: 100%;
  padding: 10px 44px 10px 16px;
  border: 1px solid #e9ecef;
  border-radius: 50px;
  background: #fdfdfd;
}
.mp-blog-search-form input:focus {
  border-color: #0e1035;
  background: #fff;
  outline: none;
}
.mp-blog-search-form button {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 32px;
  height: 32px;
  background: #0e1035;
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mp-blog-search-form button:hover {
  background: var(--secondary-color);
}
.mp-blog-category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mp-blog-category-list li {
  margin-bottom: 10px;
}
.mp-blog-category-list li:last-child {
  margin-bottom: 0;
}
.mp-blog-category-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #f9f9f9;
  border-radius: 10px;
  color: #6c757d;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: 0.3s;
}
.mp-blog-category-list a:hover,
.mp-blog-category-list a.active {
  background: #0e1035;
  color: #fff;
}
.mp-blog-category-list a span {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
}
.mp-blog-category-list a:hover span,
.mp-blog-category-list a.active span {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.mp-blog-recent-posts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mp-blog-recent-item {
  display: flex;
  gap: 12px;
  align-items: center;
}
.mp-blog-recent-img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.mp-blog-recent-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-blog-recent-info h6 {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
}
.mp-blog-recent-info h6 a {
  color: #0e1035;
  text-decoration: none;
}
.mp-blog-recent-info h6 a:hover {
  color: var(--secondary-color);
}
.mp-blog-recent-info span {
  font-size: 11px;
  color: #adb5bd;
}

/* página de artigo */
.mp-blog-details-content {
  background: #fff;
  padding: 36px;
  border-radius: 18px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin-bottom: 40px;
}
.mp-blog-detail-img {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 26px;
}
.mp-blog-detail-header h2 {
  font-size: 28px;
  color: #0e1035;
  margin-bottom: 18px;
}
.mp-blog-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e9ecef;
  list-style: none;
  padding-left: 0;
}
.mp-blog-detail-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
}
.mp-blog-detail-meta li i {
  color: var(--secondary-color);
}
.mp-blog-detail-text {
  font-size: 16px;
  color: #495057;
  line-height: 1.8;
}
.mp-blog-detail-text p {
  margin-bottom: 18px;
}
.mp-blog-related-title {
  font-size: 22px;
  font-weight: 800;
  color: #0e1035;
  margin-bottom: 24px;
}
@media (max-width: 767.98px) {
  .mp-blog-page {
    padding: 40px 0;
  }
  .mp-blog-details-content {
    padding: 24px;
  }
}

/* Projeto Fusão-04 - Newsletter, medida diretamente no código do FixMate
   (".newsletter-section": cartão largo fundo escuro, cantos muito
   arredondados, título/subtítulo centrados a branco, campo+botão numa
   única pílula). Cores usam os tokens do próprio tema
   (--primary-color/--secondary-color) em vez do navy/laranja literais do
   FixMate - mesmo espírito de best-service-platform acima. */
.mp-newsletter-card {
  background: var(--primary-color);
  border-radius: 50px;
  padding: 80px 40px;
}
.mp-newsletter-title {
  font-family: var(--mp-heading-font);
  color: var(--color-white);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
}
.mp-newsletter-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  margin: 0 0 32px;
}
.mp-newsletter-box {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border-radius: 100px;
  padding: 10px;
  max-width: 550px;
  margin: 0 auto;
}
.mp-newsletter-input {
  flex: 1 1 auto;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 10px 24px;
  font-size: 16px;
  min-width: 0;
}
.mp-newsletter-input:focus {
  outline: none;
}
.mp-newsletter-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
  background: var(--secondary-color);
  color: var(--color-white);
  border: 0;
  border-radius: 100px;
  padding: 12px 36px;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .mp-newsletter-card {
    padding: 48px 20px;
    border-radius: 30px;
  }
  .mp-newsletter-title {
    font-size: 26px;
  }
  .mp-newsletter-box {
    flex-direction: column;
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 12px;
  }
  .mp-newsletter-input {
    width: 100%;
    background: var(--color-white);
    border-radius: 100px;
    padding: 14px 24px;
  }
  .mp-newsletter-btn {
    width: 100%;
    padding: 14px 24px;
  }
}

/* Projeto Fusão-04 - "Fale Connosco" (contacto + newsletter fundidos numa
   só secção). Mesmo espírito visual das outras secções de fecho do portal
   (fundo escuro var(--primary-color), acento var(--secondary-color)) -
   cartões de informação em vidro semitransparente sobre o fundo escuro,
   formulário em campos claros dentro de um cartão translúcido. */
.mp-contact-section {
  background: var(--primary-color);
  padding: 96px 0;
}
.mp-contact-title {
  font-family: var(--mp-heading-font);
  color: var(--color-white);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  margin: 8px 0 16px;
}
.mp-contact-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.mp-contact-info-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px;
  height: 100%;
}
.mp-contact-info-card i {
  color: var(--secondary-color);
  font-size: 20px;
  margin-bottom: 8px;
  display: block;
}
.mp-contact-info-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 4px;
}
.mp-contact-info-card a {
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  word-break: break-word;
}
.mp-contact-social-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--color-white);
}
.mp-contact-form {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px;
}
.mp-contact-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.mp-contact-input {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--color-white);
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
}
select.mp-contact-input {
  appearance: auto;
}
/* Projeto Fusão-04 - a pergunta "anti-robô" de cálculo (fallback do
   reCAPTCHA, quando desligado - ver landing/layout/recaptcha.blade.php)
   usa as classes genéricas do Bootstrap (form-label/form-control), que
   dão texto escuro por omissão - aqui dentro do quadro escuro precisa do
   mesmo tratamento dos outros campos, senão fica ilegível. Este partial é
   partilhado com outras páginas (ex.: registo de loja) com fundo claro,
   por isso a correção fica só dentro de .mp-contact-form, não global. */
.mp-contact-form .form-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.mp-contact-form .form-control {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--color-white);
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
}
.mp-contact-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  cursor: pointer;
  margin: 4px 0 0;
}
.mp-contact-checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
}
.mp-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
  background: var(--secondary-color);
  color: var(--color-white);
  border: 0;
  border-radius: 100px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 15px;
}
@media (max-width: 767.98px) {
  .mp-contact-section {
    padding: 56px 0;
  }
  .mp-contact-title {
    font-size: 28px;
  }
  .mp-contact-form {
    padding: 24px;
  }
}

/* Projeto Fusão-04 - inscrição na newsletter dentro do quadro laranja do
   rodapé (".contact-box", background: var(--secondary-color) já definido
   acima) - pílula branca com campo+botão, dizeres/estrutura inspirados no
   FixMate (".newsletter-section"), sem o cartão escuro (o próprio
   ".contact-box" já é o destaque). Botão em --primary-color (escuro) para
   contrastar com o laranja do fundo, em vez de repetir a mesma cor. */
.footer-newsletter-box {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border-radius: 100px;
  padding: 6px;
}
.footer-newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  font-size: 14px;
  color: #333;
}
.footer-newsletter-input:focus {
  outline: none;
}
.footer-newsletter-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
  background: var(--primary-color);
  color: var(--color-white);
  border: 0;
  border-radius: 100px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .footer-newsletter-box {
    flex-direction: column;
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 10px;
  }
  .footer-newsletter-input {
    width: 100%;
    background: var(--color-white);
    border-radius: 100px;
    padding: 12px 18px;
  }
  .footer-newsletter-btn {
    width: 100%;
  }
}

/* Projeto Fusão-04 - "Serviços em Destaque" PAGO: 1 loja de cada vez, nome
   da loja em título, 4 cartões - mesma linguagem visual dos cartões de
   .mp-service-card (cantos arredondados, imagem+conteúdo empilhados),
   só mais compacto (4 por linha em desktop) e com um selo "Publicidade"
   para deixar claro que é conteúdo pago, não o algoritmo automático. */
.mp-paid-spotlight-company {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
/* Espaço claro entre o grupo de Serviços e o de Produtos - a pedido,
   ficavam "colados" quando era só uma grelha contínua de 8 cartões. */
.mp-paid-spotlight-group-products {
  margin-top: 40px;
}
.mp-paid-spotlight-group-title {
  font-family: var(--mp-heading-font);
  font-size: 16px;
  font-weight: 700;
  color: #0e1035;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mp-paid-spotlight-badge {
  background: var(--secondary-color);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 100px;
}
.mp-paid-spotlight-vendor-name {
  font-family: var(--mp-heading-font);
  font-size: 22px;
  font-weight: 800;
  color: #0e1035;
  margin: 0;
}
.mp-paid-spotlight-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none !important;
}
.mp-paid-spotlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Imagem em altura fixa (medido no FixMate: 240px) - tamanho sempre
   igual em todos os cartões, seja qual for o formato da foto original. */
.mp-paid-spotlight-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #f2f2f2;
}
.mp-paid-spotlight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.mp-paid-spotlight-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-white);
  color: #1a1a2e;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}
/* Preço em destaque, sobreposto à imagem (pedido explícito - é
   publicidade, o valor tem de se notar de propósito, mesmo espírito do
   selo de preço do FixMate, só com a cor de acento do próprio tema). */
.mp-paid-spotlight-price {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--primary-color);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 100px;
}
.mp-paid-spotlight-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.mp-paid-spotlight-title {
  font-size: 15px;
  font-weight: 700;
  color: #0e1035;
  margin: 0;
  line-height: 1.4;
  min-height: 2.8em;
}
.mp-paid-spotlight-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mp-paid-spotlight-rating {
  color: #f59e0b;
  font-size: 13px;
  font-weight: 600;
}
.mp-paid-spotlight-cta {
  background: color-mix(in srgb, var(--secondary-color), transparent 88%);
  color: var(--secondary-color);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .mp-paid-spotlight-vendor-name {
    font-size: 18px;
  }
  .mp-paid-spotlight-img-wrap {
    height: 180px;
  }
  .mp-paid-spotlight-group-products {
    margin-top: 28px;
  }
}

/* Projeto Fusão-04 - página "Sobre Nós", dobras medidas diretamente no
   código ao vivo do FixMate (about-us). Reaproveita as variáveis de cor já
   usadas em todo o portal (--primary-color/--secondary-color) em vez das
   cores literais do FixMate. */
.mp-about-who-text p {
  color: #555;
  line-height: 1.8;
  font-size: 16px;
}
/* "As Nossas Funcionalidades" - itens verticais ícone+texto */
.mp-about-feature-item {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}
.mp-about-feature-item:last-child {
  margin-bottom: 0;
}
.mp-about-feature-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--secondary-color), transparent 88%);
  color: var(--secondary-color);
  font-size: 22px;
}
.mp-about-feature-title {
  font-family: var(--mp-heading-font);
  font-size: 18px;
  font-weight: 700;
  color: #0e1035;
  margin: 0 0 4px;
}
/* Banner alto com selo flutuante, ao lado dos itens verticais */
.mp-about-banner-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  background: #f2f2f2;
}
.mp-about-banner-wrap img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.mp-about-banner-label {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: var(--color-white);
  border-radius: 16px;
  padding: 16px 24px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.mp-about-banner-label span {
  display: block;
  color: #777;
  font-size: 13px;
}
.mp-about-banner-label h3 {
  font-family: var(--mp-heading-font);
  color: #0e1035;
  font-size: 26px;
  font-weight: 800;
  margin: 2px 0 0;
}
/* Projeto Fusão-04 - linha do contador + linha dos 4 ícones passaram a
   ser 1 única dobra (#about-stats-icons), igual ao FixMate: linha do
   contador com uma linha fina de divisão por baixo (".counter-row {
   border-bottom: 1px solid ... }", medido diretamente no código ao
   vivo), seguida seguida da fila de ícones sem espaço grande entre elas. */
.mp-about-counter-row {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(14, 16, 53, 0.1);
}
.mp-about-counter-number {
  font-family: var(--mp-heading-font);
  font-size: 42px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 4px;
}
.mp-about-counter-label {
  font-size: 14px;
  color: #6c757d;
}
.mp-about-icon-row {
  padding-top: 0;
}
/* Fila de 4 ícones de destaque */
.mp-about-icon-item i {
  font-size: 34px;
  color: var(--secondary-color);
  margin-bottom: 14px;
  display: block;
}
.mp-about-icon-item h4 {
  font-family: var(--mp-heading-font);
  font-size: 17px;
  font-weight: 700;
  color: #0e1035;
  margin: 0 0 6px;
}
/* Montagem de fotos circulares + testemunho em destaque */
.mp-about-montage {
  position: relative;
  min-height: 420px;
}
.mp-about-montage-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--secondary-color), transparent 70%);
}
.mp-about-montage-circle.mp-circle-lg {
  width: 340px;
  height: 340px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.mp-about-montage-circle.mp-circle-md {
  width: 220px;
  height: 220px;
  bottom: 20px;
  left: 20%;
  border-color: color-mix(in srgb, var(--primary-color), transparent 70%);
}
.mp-about-montage-avatar {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.mp-about-montage-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.mp-about-montage-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--secondary-color), transparent 85%);
  color: var(--secondary-color);
  font-size: 1.4rem;
}
/* Projeto Fusão-04 - 4 tamanhos diferentes, igual ao FixMate
   (".av-1/2/3/4", medido diretamente no código ao vivo) - a Foto 3 é a
   maior de todas e fica do lado direito. */
.mp-about-montage-avatar.mp-av-1 {
  width: 110px;
  height: 110px;
  top: 0;
  left: 10%;
}
.mp-about-montage-avatar.mp-av-2 {
  width: 85px;
  height: 85px;
  top: 10%;
  right: 5%;
}
.mp-about-montage-avatar.mp-av-3 {
  width: 170px;
  height: 170px;
  bottom: 5%;
  right: 8%;
}
.mp-about-montage-avatar.mp-av-4 {
  width: 95px;
  height: 95px;
  bottom: 0;
  left: 5%;
}
.mp-about-quote-icon {
  font-size: 32px;
  color: color-mix(in srgb, var(--secondary-color), transparent 40%);
  margin-bottom: 12px;
  display: block;
}
.mp-about-quote-text {
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.mp-about-quote-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mp-about-quote-author img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}
.mp-about-quote-author h5 {
  font-size: 15px;
  font-weight: 700;
  color: #0e1035;
  margin: 0;
}
.mp-about-quote-author span {
  font-size: 13px;
  color: #777;
}
@media (max-width: 991.98px) {
  .mp-about-montage {
    min-height: 300px;
  }
  .mp-about-montage-circle.mp-circle-lg {
    width: 260px;
    height: 260px;
  }
  .mp-about-montage-circle.mp-circle-md {
    width: 170px;
    height: 170px;
  }
  .mp-about-montage-avatar.mp-av-1 {
    width: 85px;
    height: 85px;
  }
  .mp-about-montage-avatar.mp-av-2 {
    width: 65px;
    height: 65px;
  }
  .mp-about-montage-avatar.mp-av-3 {
    width: 130px;
    height: 130px;
  }
  .mp-about-montage-avatar.mp-av-4 {
    width: 75px;
    height: 75px;
  }
}
/* Projeto Fusão-04 - "O Que Dizem de Nós" é a última dobra da página
   (a Newsletter saiu, ver about-us.blade.php) - fica logo a seguir o
   rodapé, precisa de mais respiro por baixo do que as outras dobras
   (que têm sempre outra dobra a seguir). */
#about-testimonial {
  padding-bottom: 140px;
}
@media (max-width: 767.98px) {
  #about-testimonial {
    padding-bottom: 64px;
  }
  .mp-about-banner-wrap img {
    height: 300px;
  }
  .mp-about-counter-row {
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .mp-about-counter-number {
    font-size: 30px;
  }
  .mp-about-counter-label {
    font-size: 12px;
  }
  .mp-about-feature-item {
    margin-bottom: 20px;
  }
  .mp-about-quote-text {
    font-size: 15px;
  }
}

/* Projeto Fusão-04 - página "/stores" ("Serviços e Produtos"): o quadro
   de pesquisa/filtros fica fixo do lado esquerdo, flutuante ao descer a
   página (pedido explícito) - só a lista de resultados à direita sobe/
   desce. "top: 90px" = altura do cabeçalho fixo (72px, medido ao vivo)
   + respiro. Só a partir do breakpoint "lg" (ver
   landing/stores.blade.php) - abaixo disso os filtros empilham por
   cima dos resultados numa única coluna, onde flutuar não faz sentido. */
@media (min-width: 992px) {
  .mp-store-filters-sticky {
    position: sticky;
    top: 90px;
  }
}
/* Projeto Fusão-04 - espaço a mais entre a barra "Home > Os nossos
   escritórios" (".breadcrumb-sec", já tem 20px de margem por baixo,
   partilhada com outras páginas) e o quadro de pesquisa/resultados
   desta página - dobrado 2x a pedido (20px -> 40px). */
.mp-store-content-row {
  margin-top: 40px;
}