/*
* ----------------------------------------------------------------------------------------
Author       : Onepageboss
Template Name: Moon Responsive app landing template
Version      : 1.0                                          
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 01.GLOBAL CSS STYLE
* 02.PRELOADER & BOUNCE CCS STYLE
* 03.HOMEPAGE CSS STYLE
* 04.VIDEO BACKGROUND CSS STYLE
* 05.FEATURE CSS STYLE
* 06.EVER SEEN CSS STYLE
* 07.VITRINE LIST CSS
* 08.TOTAL DOWNLOAD CSS STYLE
* 09.TEAM CSS STYLE
* 10.USER CSS STYLE
* 11.PRICING CSS STYLE
* 12.DOWNLOAD CSS STYLE
* 13.CONTACT CSS STYLE
* 14.FOOTER CSS STYLE
* 15.CLIENTS CSS STYLE
* 16.BLOG CSS STYLE
* 17.PARTNERS FOOTER CSS STYLE
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 01.GLOBAL STYLE
* ----------------------------------------------------------------------------------------
*/

body {
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    height: 100%;
    font-family: 'Titillium Web', sans-serif;
    /* font-family: 'PT Sans', sans-serif; */
    background: #fff;
    color: rgba(0, 0, 0, .8);
}

html,
body {
    height: 100%
}

a {
    text-decoration: none;
    -webkit-transition: all 0.4s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

img {
    max-width: 100%;
}

a:hover {
    color: #ffc122;
    text-decoration: none;
}

a:focus {
    outline: none;
    text-decoration: none;
}

a.linkstd {
    color: #ffc122;
    text-decoration: none;
}

p {
    line-height: 28px;
}

ul,
li {
    margin: 0;
    padding: 0;
}

fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}

.no-padding {
    padding: 0
}

.section-padding {
    padding-top: 70px;
    padding-bottom: 78px;
}

.section-padding-normal {
    padding-top: 60px;
    padding-bottom: 40px;
}

.section-padding-medium{
    padding-top: 50px;
    padding-bottom: 30px;
}

.section-padding-small {
    padding-top: 35px;
    padding-bottom: 20px;
}

.section-title {
    margin-bottom: 10px;
    text-align: center;
}

.section-title.flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    padding: 0 1% 1% 1%;
    justify-content: center;
    text-align: center;
}

.section-title h2 {
    font-size: 40px;
    text-transform: capitalize;
    margin: 0;
    font-weight: 400;
    font-style: italic;
}

.section-title h2.title {
    font-size: clamp(1.625rem, 3.929vw + 0.839rem, 4.375rem);
    line-height: 1.1;
    color: #000;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-style: normal;
    text-transform: none;
}

.section-title p.text-regular {
    font-size: clamp(1.375rem, 1.786vw + 1.018rem, 2.625rem);
    line-height: 1.2;
    font-weight: 300;
}

.section-title h2.text-regular {
    text-transform: none;
}

a.read-more {
    margin-top: 20px;
    display: inline-block;
    color: #333;
    padding: 10px 25px;
    border: 1px solid #F7F7F7;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 30px;
    background: #F7F7F7;
}

a.read-more:hover {
    background: #202020;
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
    border: 1px solid #202020;
}

.containerScroll {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.scrollup {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    line-height: 40px;
    cursor: pointer;
    display: none;
    z-index: 2;
    background: #000;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}


.scrollup:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 1.2);
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.scroll-to-down {
    position: relative;
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-top: 0;
}

.scroll-to-down.minus60 {
    margin-top: -60px;
}

.scroll-to-down.minus70 {
    margin-top: -70px;
}

.scroll-to-down.minus80 {
    margin-top: -80px;
}

.scroll-text {
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 10px;
    font-weight: 600;
}

.scrolldown.light {
    color: #000;
    background: #fff;
}
.scrolldown.dark {
    color: #fff;
    background: #000;
}

.scrolldown.yellow {
    color: #000;
    background: #fec123;
}

.lnr-chevron-down:before {
    font-weight: bold;
    /* Técnicas para deixar mais bold */
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor, 0 -1px 0 currentColor;
    display: inline-block;
    /* Ajuste fino para centralizar a seta */
    padding: 0 0 0 1px;
}

.lnr-chevron-up:before {
    font-weight: bold;
    /* Técnicas para deixar mais bold */
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor, 0 -1px 0 currentColor;
    display: inline-block;
    /* Ajuste fino para centralizar a seta */
    padding: 0 0 0 1px;
}

.scrolldown {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    font-size: 14px;
    color: #000;
    text-align: center;
    position: relative;
    line-height: 40px;
    cursor: pointer;
    z-index: 2;
    background: #fff;
}

.flexLeft {display: flex; justify-content: flex-end;}
.flexRight {display: flex; justify-content: flex-start;}
.flexCenter {display: flex; justify-content: center;}

.aspect-ratio-image video {
    width: 100%;
}

/*
* ----------------------------------------------------------------------------------------
* 02.PRELOADER & BOUNCE CCS STYLE
* ----------------------------------------------------------------------------------------
*/

.preloader-area {
    position: fixed;
    background: #fff;
    z-index: 11000;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.spinner {
    margin: auto;
    width: 40px;
    height: 40px;
    position: relative;
    text-align: center;
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -20px;
    top: 50%;
    -webkit-animation: sk-rotate 2.0s infinite linear;
    animation: sk-rotate 2.0s infinite linear;
}

.dot1,
.dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #000;
    border-radius: 100%;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot1 {
    background-color: #ccc;
}

.dot2 {
    top: auto;
    background-color: #000;
    bottom: 0;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes sk-rotate {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg)
    }
}

@-webkit-keyframes sk-bounce {
    0%,
    100% {
        -webkit-transform: scale(0.0)
    }
    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}


/*
* ----------------------------------------------------------------------------------------
* 03.HOMEPAGE CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.welcome-area {
    height: 100%;
}

.welcome-image-area {
    position: relative;
    height: 100%;
    /* background: url(../images/bg/bg1.jpg); */
    background-size: cover;
    z-index: 1;
}

.welcome-image-area:after {
    position: absolute;
    background: rgba(0, 0, 0, .8);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}

/* NOVA AREA COM VIDEO ENTROPIA */
.welcome-image-area-video {
    position: relative;
    height: 100%;
    z-index: 1;
}

.welcome-image-area-video:after {
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}

.welcome-image-area-video .welcome-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.welcome-image-area-video .welcome-container .left-header-text {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 4%;
    gap: 2rem;
}

.welcome-image-area-video .welcome-container .left-header-text h2 {
    font-size: clamp(1.625rem, 3.929vw + 0.839rem, 4.375rem);
    line-height: 1.1;
    color: #000;
    margin: 0;
    padding: 0;
    font-weight: 600;
}
.welcome-image-area-video .welcome-container .left-header-text .text-regular {
    font-size: clamp(1.375rem, 1.786vw + 1.018rem, 2.625rem);
    line-height: clamp(1.513rem, 2.714vw + 0.97rem, 3.413rem);
    line-height: 1.3;
    color: #000;
    margin: 0;
    padding: 0;
    font-weight: 300;
}

.welcome-image-area-video .welcome-container .left-header-text .highlight-svg {
    position: relative;
    display: inline-block;
    background: url('data:image/svg+xml;utf8,<svg width="152" height="67" viewBox="0 0 152 67" xmlns="http://www.w3.org/2000/svg"><path d="M119.886 0.222186C119.02 0.222186 118.153 0.222186 117.287 0.222186C115.44 0.222186 113.593 0.222186 111.747 0.377715C104.441 1.04427 97.1351 1.68861 89.8376 2.35517C83.9947 2.88841 78.1517 3.82159 72.3169 4.57702C66.9561 5.2658 61.5953 6.06567 56.2345 6.59891C48.226 7.421 40.2093 8.2653 32.2008 9.08739C28.0168 9.50954 23.8246 9.79838 19.6405 10.1094C17.9244 11.7981 16.3554 14.2199 14.9335 17.3971C11.395 24.396 8.16712 33.039 5.29876 41.9931C3.67254 46.8812 2.23428 52.1247 0.9758 57.746C0.673438 59.5902 0.379248 61.4121 0.0768858 63.2562C-0.192789 66.3446 0.248497 67.5222 1.37623 66.789C9.90774 66.2113 18.4393 65.4559 26.9708 64.656C32.021 64.1894 37.0713 63.7673 42.1216 63.2118C50.3752 62.3008 58.6289 61.3899 66.8744 60.4789C72.227 59.879 77.5878 59.6568 82.9486 59.3458C86.3155 59.1458 89.6741 58.9458 93.041 58.7681C95.8113 58.6126 98.5979 58.9236 101.368 59.0125C104.13 59.1014 106.909 58.9458 109.671 59.3902C112.163 59.7901 114.68 59.9901 117.181 60.4789C117.148 61.501 117.181 62.5675 117.295 63.6562C119.592 64.7671 121.945 64.9226 124.274 65.0782C126.342 65.2115 128.45 65.7225 130.501 65.2337C132.389 63.3673 134.113 60.7011 135.666 57.2128C138.191 52.0136 140.561 46.3479 142.792 40.2156C145.047 34.1721 147.123 27.7065 149.043 20.8632C149.697 18.197 150.351 15.5308 151.005 12.8645C151.92 9.95391 152.206 6.75444 151.855 3.28835C151.176 3.04394 150.49 2.84398 149.803 2.66623C150.228 2.79954 150.661 2.91063 151.086 3.04394C148.692 2.33295 146.265 2.04411 143.854 1.68861C142.016 1.42199 140.185 1.15536 138.346 0.888742C135.078 0.399934 131.801 0.355497 128.524 0.0888742C127.69 0.0222186 126.857 0 126.023 0C123.972 0 121.921 0.15553 119.878 0.177748L119.886 0.222186Z" fill="%23FFCE40"/></svg>') no-repeat center;
    background-size: contain;
    padding: 0.1em 0.2em;
    font-weight: 800;
}

.welcome-image-area-video .welcome-container .ball-placeholder {
    flex: 0 0 50%;
    max-width: 50%;
}

@media screen and (max-width: 768px) {
    .aspect-ratio-image video {
        width: 72%; /* aproximadamente 360px */
    }
    .welcome-image-area-video .welcome-container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .welcome-image-area-video .welcome-container .left-header-text {
        order: 1;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        flex: none;
        padding: 22% 8% 0 8%;
    }
    
    .welcome-image-area-video .welcome-container .ball-placeholder {
        order: 2;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        flex: none;
    }
}

@media screen and (max-width: 360px) {
    .aspect-ratio-image video {
        width: 60%;
    }
}
/* NOVA AREA COM VIDEO ENTROPIA */

/* BLOCO SOBRE ENTROPIA */
#sobre-entropia-digital .entropia-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem;
}

#sobre-entropia-digital .entropia-text {
    display: flex;
    flex-direction: column;
    flex: 0 0 60%;
    max-width: 60%;
    gap: 20px;
    padding: 0 4% 2% 4%;
}

#sobre-entropia-digital .entropia-text h2 {
    font-size: clamp(1.625rem, 3.929vw + 0.839rem, 4.375rem);
    line-height: 1.1;
    color: #fff;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

#sobre-entropia-digital .entropia-text .text-regular {
    font-size: clamp(1.375rem, 1.786vw + 1.018rem, 2.625rem);
    line-height: 1.2;
    color: #fff;
    font-weight: 300;
}

#sobre-entropia-digital .entropia-text .text-regular2 {
    font-size: clamp(1.375rem, 1.786vw + 1.018rem, 2.625rem);
    line-height: 1.3;
    color: #FFCE40;
    font-weight: 400;
}

#sobre-entropia-digital .entropia-image {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sobre-entropia-digital .entropia-image img {
    max-width: 100%;
    height: auto;
}

/* Responsivo para mobile */
@media screen and (max-width: 768px) {
    #sobre-entropia-digital .entropia-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
        margin-bottom: -2px; /* Ajuste para remover espaço extra */
    }
    
    #sobre-entropia-digital .entropia-text {
        flex: none;
        max-width: 100%;
        width: 100%;
        order: 1;
    }
    
    #sobre-entropia-digital .entropia-image {
        flex: none;
        max-width: 300px;
        width: 100%;
        order: 2;
    }
}
/* BLOCO SOBRE ENTROPIA */


/* BLOCO METODO STANDOUT */
#metodo-standout {
    position: relative;
}

#metodo-standout .metodo-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

#metodo-standout .metodo-text {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 4% 2% 4%;
    justify-content: center;
    text-align: center;
}

#metodo-standout .metodo-text h2 {
    font-size: clamp(1.625rem, 3.929vw + 0.839rem, 4.375rem);
    line-height: 1.1;
    color: #fff;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

#metodo-standout .metodo-text .text-regular {
    font-size: clamp(1.375rem, 1.786vw + 1.018rem, 2.625rem);
    line-height: 1.2;
    color: #fff;
    font-weight: 300;
}

#metodo-standout .metodo-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 2% 3% 4% 3%;
}

#metodo-standout .metodo-cards .card {
    flex: 1 1 320px;
    max-width: 360px;
    background: #fff;
    color: #000;
    border-radius: 16px;
    border: 3px solid #FFCE40;
    padding: 20px;
    box-sizing: border-box;
}

#metodo-standout .metodo-cards .card h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
}

#metodo-standout .metodo-cards .card p {
    font-size: 1.9rem;
    line-height: 1.2;
}

#metodo-standout .metodo-cards .card .divider {
    width: 100%;
    height: 3px;
    background-color: #FFCE40;
    margin: 8px auto 16px;
}

#metodo-standout .metodo-cards .card .descricao-card {
    min-height: 164px;
    padding: 0 0 2% 0;
}

#metodo-standout .metodo-cards .card .ferramentas {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    letter-spacing: 0.1em;
    padding: 1%;
}

#metodo-standout .metodo-cards .card .ferramentas .ferramentas-list {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

#metodo-standout .metodo-cards .card .ferramentas span {
    font-size: 1.7rem;
    line-height: 1.4;
    letter-spacing: 0;
}

#metodo-standout .metodo-cards .card .ferramentas .bullet {
    display: flex;
    align-items: center;
    padding: 0 6px;
}

#metodo-standout .metodo-cards .card .ferramentas .bullet::before {
    content: "●";
    width: 6px;
    height: 6px;
    background-color: #1f1f1f;
    border-radius: 50%;
    display: inline-block;
    font-size: 0;
}
/* BLOCO METODO STANDOUT */

/* BLOCO ESTUDO DE CASO */
#estudo-de-caso {
    position: relative;
}

#estudo-de-caso .estudo-caso-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-text {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 4% 2% 4%;
    justify-content: center;
    text-align: center;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-text * {
    width: 100%;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-text h2 {
    font-size: clamp(1.625rem, 3.929vw + 0.839rem, 4.375rem);
    line-height: 1.1;
    color: #000;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-text .text-regular {
    font-size: clamp(1.375rem, 1.786vw + 1.018rem, 2.625rem);
    line-height: 1.2;
    color: #000;
    font-weight: 300;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box {
    width: 95%;
    margin: 2% 3% 4% 3%;
    background: #fff;
    color: #000;
    border-radius: 16px;
    border: 3px solid #FFCE40;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box .logo-container {
    text-align: center;
    margin-bottom: 30px;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box .content-container {
    display: flex;
    align-items: stretch;
    gap: 0;
    text-align: left;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box .content-left {
    flex: 1;
    padding-right: 30px;
    align-content: center;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box .content-right {
    flex: 1;
    padding-left: 30px;
    align-content: center;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box .vertical-divider {
    width: 3px;
    background-color: #FFCE40;
    min-height: 100%;
    flex-shrink: 0;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box .horizontal-divider {
    display: none;
    width: 100%;
    height: 3px;
    background-color: #FFCE40;
    margin: 20px 0;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box .text-regular p {
    font-size: 1.9rem;
    line-height: 1.2;
    text-align: center;
}

#estudo-de-caso .estudo-caso-container .estudo-caso-box .result-highlight {
    background: #FFF8E1;
    padding: 15px;
    border-left: 4px solid #FFCE40;
    margin: 15px 0;
    font-weight: 600;
    font-size: 1.7rem;
}

/* Responsive para estudo de caso box */
@media (max-width: 768px) {
    #estudo-de-caso .estudo-caso-container .estudo-caso-box {
        padding: 25px;
    }
    
    #estudo-de-caso .estudo-caso-container .estudo-caso-box .content-container {
        flex-direction: column;
        gap: 0;
    }
    
    #estudo-de-caso .estudo-caso-container .estudo-caso-box .content-left {
        padding-right: 0;
        padding-bottom: 0;
    }
    
    #estudo-de-caso .estudo-caso-container .estudo-caso-box .content-right {
        padding-left: 0;
        padding-top: 0;
    }
    
    #estudo-de-caso .estudo-caso-container .estudo-caso-box .vertical-divider {
        display: none;
    }
    
    #estudo-de-caso .estudo-caso-container .estudo-caso-box .horizontal-divider {
        display: block;
    }
}

/* BLOCO ESTUDO DE CASO */

.welcome-image-area-howto {
    position: relative;
    height: 100%;
    /* background: url(../images/bg/bg1.jpg); */
    background-size: cover;
    z-index: 1;
}

.welcome-image-area-howto:after {
    position: absolute;
    background: rgba(0, 0, 0, .9);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}

#background-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.display-table {
    display: table;
    width: 100%;
    height: 100%;
}

.display-table-cell {
    display: table-cell;
    vertical-align: middle;
}

.header-text {
    margin-top: 160px;
}

.header-text h2 {
    color: #fff;
    font-size: 50px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 300;
}

.header-text p {
    color: #fafafa;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 20px;
    margin-top: 20px;
}

.header-text1 h2 {
    color: #fff;
    font-size: 40px;
    margin-top: 6vw;
    margin-bottom: 10px;
    font-weight: 300;
}

.header-text2 h2 {
    color: #fff;
}

.header-text2 h3 {
    color: #fff;
    font-size: min(max(18px, calc(1.125rem + ((1vw - 3.2px) * 0.8333))), 26px);
    font-weight: 300;
    margin-bottom: 30px;
    margin-top: 30px;
}

.header-text2 p {
    color: #fafafa;
    font-size: min(max(16px, calc(1rem + ((1vw - 3.2px) * 1.2903))), 18px);
    line-height: min(max(18px, calc(1.25rem + ((1vw - 3.2px) * 2.5806))), 24px);
    font-weight: 300;
    font-style: italic;
    margin-bottom: 20px;
    margin-top: 20px;
}

.header-image {
    margin-top: 50px;
}

.header-image img {
    width: 350px;
}

.iconsHome {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-end;
    gap: 10px;
}

.video-area-text {
    margin-top: 6vw;
}

.video-area-text span {
    color: #fafafa;
    font-size: 16px;
    display: inline-block;
    margin-left: 5px;
}

.video-area-text i {
    font-size: 20px;
    border: 1px solid #fafafa;
    color: #fafafa;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    line-height: 38px;
    text-align: center;
    vertical-align: middle;
    /* padding-left: 6px; */
}

.mfp-iframe-holder {
    padding-top: 80px;
}

.header-top-area-fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
}

.header-top-area {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.logo {
    width: 100%;
    min-width: 240px;
    min-height: 100px;
    cursor: pointer;
    margin: 10px 0 10px 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background: url("../images/logo-fundo-escuro.gif") no-repeat top center;
}

.logo a {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 300;
    color: #fff;
}

.header-top-area-fixed .logo {
    width: 100%;
    min-width: 260px;
    min-height: 93px;
    cursor: pointer;
    margin: 10px 0 10px 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background: url("../images/logo-novo-2025-white.png") no-repeat top center;
    background-size: 260px 93px;
}

.header-top-area-fixed .mainmenu .navbar-nav li a {
    color: #000;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 50px 10px;
    -webkit-transition: .3s;
    transition: .3s;
}

.mainmenu .navbar-nav li a {
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 50px 10px;
    -webkit-transition: .3s;
    transition: .3s;
    position: relative;
    overflow: hidden;
    font-weight: 500;
}

.mainmenu .navbar-nav li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 24px;
    background-color: #ffc122;
    transform: translateY(-50%);
    transition: width 0.2s ease-out;
    z-index: -1;
}

.mainmenu .navbar-nav li a:hover {
    background: none;
    color: #202020;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.mainmenu .navbar-nav li a:hover::before {
    width: 100%;
}

.nav li a:focus,
.nav li a:hover {
    background: none;
    color: #ffc122;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.navbar {
    margin: 0;
    min-height: 34px;
}

.menu-bg {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background: #f7f7f7;
}

.menu-bg .logo {
    width: 100%;
    min-width: 240px;
    min-height: 100px;
    margin: 10px 0 10px 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background: url("../images/logo-fundo-claro.gif") no-repeat top center;
    cursor: pointer;
}

.menu-bg .logo a {
    color: #202020;
}

.menu-bg .mainmenu .navbar-nav li a {
    color: #202020;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    -webkit-transition: .3s;
    transition: .3s;
}

.menu-bg .mainmenu .navbar-nav li a:hover {
    color: #ffc122;
}


/*
* ----------------------------------------------------------------------------------------
* 04. VIDEO BACKGROUND CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.welcome-video-area {
    position: relative;
    height: 100%;
    background-size: cover;
    z-index: 1;
    background-position: center center;
}

.welcome-video-area:after {
    position: absolute;
    background: rgba(0, 0, 0, .5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}

/*
* ----------------------------------------------------------------------------------------
* 05.FEATURE CSS STYLE
* ----------------------------------------------------------------------------------------
*/

/* .service-area {} */

.single-service {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    -webkit-transition: .3s;
    transition: .3s;
    min-height: 280px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.service-active {
    box-shadow: 0px 0px 70px rgba(29, 24, 24, 0.09);
    -webkit-transition: .3s;
    transition: .3s;
}

.single-service h4 {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: #333;
}

.service-icon i {
    font-size: 40px;
    color: #ffc122;
}

.single-service p {
    margin-bottom: 0;
    color: #333;
}


/*
* ----------------------------------------------------------------------------------------
* 06.EVER SEEN CSS
* ----------------------------------------------------------------------------------------
*/

.ever-seen-area .row.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ever-seen-area p {
    font-size: min(max(16px, calc(1rem + ((1vw - 3.2px) * 1.2903))), 18px);
    line-height: min(max(20px, calc(1.25rem + ((1vw - 3.2px) * 2.5806))), 24px);
    font-weight: 300;
    font-style: normal;
}

section.black {
    background-color: #000;
}

section.dark {
    background-color: #1f1f1f;
}

.ever-text0 {
    margin-top: 0px;
}

.ever-text40 {
    margin-top: 20px;
}

.ever-text40 {
    margin-top: 40px;
}

.ever-text90 {
    margin-top: 90px;
}

.ever-text h2 {
    text-transform: capitalize;
    font-size: 40px;
}

.ever-text h3 {
    color: #202020;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 20px;
    margin-top: 20px;
}

a.download-button {
    margin: 0px 5px;
    display: inline-block;
    color: #000;
    padding: 10px 25px;
    text-transform: uppercase;
    font-size: 12px;
    border: 1px solid #F7F7F7;
    border-radius: 30px;
    margin-top: 20px;
    background: #F7F7F7;
}

a.download-button i {
    font-size: 20px;
    margin-right: 5px;
    color: #000;
}

a.download-button:hover.download-button i {
    margin-left: 5px;
    -webkit-transition: .3s;
    transition: .3s;
}


/*
* ----------------------------------------------------------------------------------------
* 07.VITRINE LIST CSS
* ----------------------------------------------------------------------------------------
*/

.vitrine-list {
    margin-top: 30px;
}

.single-vitrine {
    position: relative;
    text-align: center;
}

.single-vitrine img {
    border-radius: 16px;
}

.single-vitrine:hover .item-overlay {
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -webkit-transition: .3s;
    transition: .3s;
}

.item-overlay {
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    height: 100%;
    width: 100%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .3s;
    transition: .3s;
}


/*
* ----------------------------------------------------------------------------------------
* 08.COMPLETE PROJECT CSS STYLE
* ----------------------------------------------------------------------------------------
*/

/* .complete-project-area {} */

.single-project-complete {
    background: #fff;
    text-align: center;
    padding: 30px;
}

.single-project-complete i {
    font-size: 30px;
    color: #ffc122;
}

.single-project-complete h2 {
    font-size: 21px;
    margin: 15px 0px;
    font-weight: 700;
}

.single-project-complete h6 {
    font-size: 22px;
    text-transform: capitalize;
    color: #333;
    margin-bottom: 0;
}

.complete-active {
    box-shadow: 0px 0px 70px rgba(29, 24, 24, 0.09);
    -webkit-transition: .3s;
    transition: .3s;
}


/*
* ----------------------------------------------------------------------------------------
* 09.TEAM CSS STYLE
* ----------------------------------------------------------------------------------------
*/

/* .team-area {} */

.single-team {
    margin-top: 30px;
}

.single-team img {
    width: 100%;
}

.single-team h4 {
    font-size: 22px;
    text-transform: capitalize;
    color: #333;
    margin-bottom: 0;
}

.single-team h6 {
    font-size: 14px;
    text-transform: capitalize;
    color: #333;
    font-style: italic;
}

.team-description {
    background: #F7F7F7;
    text-align: center;
    padding: 15px 0px;
}


/*
* ----------------------------------------------------------------------------------------
* 10.TESTIMONIAL CSS STYLE
* ----------------------------------------------------------------------------------------
*/

/* .testimonial-area {} */

.testimonial-list {
    margin-top: 30px;
}

.single-testi-des {
    background: #F7F7F7;
    padding: 15px;
    margin: 0 0 8px 2px;
    position: relative;
    border-radius: 16px;
}

.single-testi-des:before {
    position: absolute;
    bottom: -12px;
    left: 0;
    height: 30px;
    width: 30px;
    content: "";
    background: #F7F7F7;
    margin-left: 12px;
    margin-top: 0px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.single-testimonial img {
    width: 60px;
    /* border-radius: 50%; */
}

/* Exceção: thumbnails de vídeo devem ter 100% */
.single-testimonial .video-thumbnail {
    width: 100% !important;
    height: 100%;
}

.single-testimonial {
    margin-right: 5px;
    min-height: 480px;
}

.single-testimonial h6 {
    margin-top: 0px;
    font-size: 12px;
    letter-spacing: 0.6px;
}

.single-testimonial p {
    font-style: italic;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
    line-height: 1.4em;
}

.owl-theme .owl-controls {
    margin-top: 30px;
}

.owl-theme .owl-controls .owl-page span {
    display: block;
    width: 14px;
    height: 14px;
    margin: 2px 5px;
    filter: Alpha(Opacity=50);
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    border: 1px solid #333;
    background: #000;
}

/* SIMPLE FULLSCREEN BUTTON FOR VIMEO */
.vimeo-fullscreen-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.vimeo-fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
    font-size: 14px;
    transition: background 0.3s ease;
}

.vimeo-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.vimeo-fullscreen-btn i {
    font-size: 12px;
}

@media only screen and (max-width: 768px) {
    /* Esconde o botão externo de fullscreen que não dá suporte no mobile */
    .vimeo-fullscreen-btn {
        display: none;
    }

    /* Diminui um pouco o logo */
    .header-top-area-fixed .logo {
        background-size: 240px 86px;
        min-height: 86px;
    }
    .header-top-area-fixed .navbar-collapse {
        padding-bottom: 10px;
    }
}


/*
* ----------------------------------------------------------------------------------------
* 11.PRICING CSS STYLE
* ----------------------------------------------------------------------------------------
*/

/* .pricing-area {} */

.pricing-box {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    margin-top: 30px;
}

.pricing-header .plan-title h4 {
    font-size: 22px;
    margin-top: 20px;
    text-transform: capitalize;
    color: #333;
}

.pricing-header .plan-price {
    font-size: 40px;
    font-family: "Montserrat", sans-serif;
    margin-bottom: 10px;
    color: #ffc122;
    font-style: italic;
}

.plan-features {
    margin-top: 40px;
}

.plan-features li {
    margin: 8px 0;
    padding-bottom: 15px;
}

.price-active {
    box-shadow: 0px 0px 70px rgba(29, 24, 24, 0.09);
    -webkit-transition: .3s;
    transition: .3s;
}


/*
* ----------------------------------------------------------------------------------------
* 12.DOWNLOAD CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.download-area {
    background: url(../images/bg/download.jpg);
    background-size: cover;
    padding: 180px 0px;
    position: relative;
    z-index: 1;
}

.download-area:after {
    position: absolute;
    background: rgba(0, 0, 0, .5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}

.download-text h2 {
    text-transform: capitalize;
    color: #fff;
    font-size: 40px;
    letter-spacing: 3px;
    margin-bottom: 30px;
    font-weight: 300;
}

.download-text img {
    margin: 0px 10px;
}


/*
* ----------------------------------------------------------------------------------------
* 13.CONTACT CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.contact-form {
    margin-top: 2px;
}

.form-control {
    display: block;
    border: 0px;
    width: 100%;
    height: 52px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #000;
    background-color: transparent;
    background-image: none;
    border-radius: 0px;
    box-shadow: none;
    margin-bottom: 4px;
    padding: 14px 7px 14px 15px;
    border: 1px solid #f2f2f2;
    background: #f2f2f2;
    border-radius: 0px;
    -webkit-transition: .3s;
    transition: .3s
}

.form-control:focus {
    border-color: #000;
    outline: 0;
    box-shadow: none;
    background: none;
    -webkit-transition: .3s;
    transition: .3s
}

.contact-form .form-control {
    border-radius: 16px;
}

.contact-form #cnpj {
    text-transform: uppercase;
}

.contact-form input[type='submit'] {
    display: inline-block;
    color: #000;
    background: transparent;
    border: 3px solid #FFCE40;
    padding: 15px 40px;
    font-size: clamp(0.938em, 0.729vw + 0.792em, 1.375em);
    border-radius: 0px;
    font-weight: 600;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.contact-form input[type='submit']:hover {
    background: #FFCE40;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.contact-form .txt-legal-contact {
    font-size: 1.8rem;
    color: #666;
    margin-top: 10px;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
    outline: none;
}

.success {
    background: #50B948 none repeat scroll 0 0;
    color: #fff;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}

label.error {
    color: #f3b311;
}


/*
* ----------------------------------------------------------------------------------------
* 14.FOOTER CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.footer-area {
    background: #202020;
    padding: 30px 0px;
}

.footer-pr {
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.1em;
    text-align: right;
    padding: 10px 10px 0 0;
}
.footer-pr a {
    color: #fff;
    text-decoration: none;
}

.footer-text h6 {
    text-transform: capitalize;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4em;
}

.footer-social-link {
    text-align: right;
}

.footer-social-link ul {
    padding: 0;
    margin: 10px 0 0 0;
    list-style: none;
}

.footer-social-link ul li {
    display: inline-block;
    margin: 0px 10px;
}

.footer-social-link ul li a {
    display: block;
    color: #fafafa;
}

.footer-social-link ul li a:hover {
    color: #fff;
}


/*
* ----------------------------------------------------------------------------------------
* 15.CLIENTS CSS
* ----------------------------------------------------------------------------------------
*/

.clients-logo-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

/* Sistema de grid personalizado para logos dos clientes */
.clients-logo-item {
    padding: 10px;
    text-align: center;
}

/* ≥992px = 6 colunas (16.67%) */
@media (min-width: 992px) {
    .clients-logo-item {
        width: 16.66666667%;
        flex: 0 0 16.66666667%;
    }
}

/* 768px-991px = 5 colunas (20%) */
@media (min-width: 768px) and (max-width: 991px) {
    .clients-logo-item {
        width: 20%;
        flex: 0 0 20%;
    }
}

/* 600px-767px = 4 colunas (25%) */
@media (min-width: 600px) and (max-width: 767px) {
    .clients-logo-item {
        width: 25%;
        flex: 0 0 25%;
        padding: 6px;
    }
}

/* <600px = 3 colunas (33.33%) */
@media (max-width: 599px) {
    .clients-logo-item {
        width: 33.33333333%;
        flex: 0 0 33.33333333%;
    }
}

.single-app {
    position: relative;
}

.single-app:hover .item-overlay {
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -webkit-transition: .3s;
    transition: .3s;
}

.item-overlay {
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    height: 100%;
    width: 100%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .3s;
    transition: .3s;
}

/* Container para a máscara de clientes */
.clients-container {
    position: relative;
    overflow: hidden;
    transition: max-height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.clients-container.collapsed {
    max-height: 280px; /* Altura para mostrar aproximadamente 2.5-3 linhas */
}

.clients-container.expanded {
    max-height: none; /* Será definido dinamicamente via JavaScript */
    transition: max-height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Máscara gradiente */
.clients-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
    transform: translateY(0);
}

.clients-mask.hidden {
    opacity: 0;
    transform: translateY(10px);
}

/* Botão Ver todos */
.show-all-clients-btn {
    background: #ffc122;
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(255, 193, 34, 0.3);
    position: relative;
    overflow: hidden;
}

.show-all-clients-btn:hover {
    transform: translateY(4px);
    box-shadow: 0 6px 20px rgba(255, 193, 34, 0.4);
}

.show-all-clients-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 34, 0.3);
}

.show-all-clients-btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.show-all-clients-btn.hidden {
    display: none;
}

/* Responsivo para mobile e tablet */
@media (max-width: 768px) {
    .clients-container.collapsed {
        max-height: 220px; /* Altura ajustada para mobile - mostra mais logos */
    }
    
    .clients-container.expanded {
        max-height: none; /* Será definido dinamicamente via JavaScript */
        transition: max-height 1.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .clients-mask {
        height: 80px; /* Máscara maior em mobile também */
    }
    
    .show-all-clients-btn {
        padding: 4px 20px;
        font-size: 12px;
    }
}

/*
* ----------------------------------------------------------------------------------------
* E-COMMERCES CSS
* ----------------------------------------------------------------------------------------
*/

.ecomm-logo-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

/* Sistema de grid personalizado para logos dos e-commerces */
.ecomm-logo-item {
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

/* ≥992px = 6 colunas (16.67%) */
@media (min-width: 992px) {
    .ecomm-logo-item {
        width: 16.66666667%;
        flex: 0 0 16.66666667%;
    }
}

/* 768px-991px = 5 colunas (20%) */
@media (min-width: 768px) and (max-width: 991px) {
    .ecomm-logo-item {
        width: 20%;
        flex: 0 0 20%;
    }
}

/* 600px-767px = 4 colunas (25%) */
@media (min-width: 600px) and (max-width: 767px) {
    .ecomm-logo-item {
        width: 25%;
        flex: 0 0 25%;
        padding: 6px;
    }
}

/* <600px = 3 colunas (33.33%) */
@media (max-width: 599px) {
    .ecomm-logo-item {
        width: 33.33333333%;
        flex: 0 0 33.33333333%;
    }
}

.single-app {
    position: relative;
}

.single-app:hover .item-overlay {
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -webkit-transition: .3s;
    transition: .3s;
}

.item-overlay {
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    height: 100%;
    width: 100%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .3s;
    transition: .3s;
}

/* Container para a máscara de e-commerces */
.ecomm-container {
    position: relative;
    overflow: hidden;
    transition: max-height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ecomm-container.collapsed {
    max-height: 280px; /* Altura para mostrar aproximadamente 2.5-3 linhas */
}

.ecomm-container.expanded {
    max-height: none; /* Será definido dinamicamente via JavaScript */
    transition: max-height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Máscara gradiente */
.ecomm-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
    transform: translateY(0);
}

.ecomm-mask.hidden {
    opacity: 0;
    transform: translateY(10px);
}

/* Botão Ver todos */
.show-all-ecomm-btn {
    background: #ffc122;
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(255, 193, 34, 0.3);
    position: relative;
    overflow: hidden;
}

.show-all-ecomm-btn:hover {
    transform: translateY(4px);
    box-shadow: 0 6px 20px rgba(255, 193, 34, 0.4);
}

.show-all-ecomm-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 34, 0.3);
}

.show-all-ecomm-btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.show-all-ecomm-btn.hidden {
    display: none;
}

/* Responsivo para mobile e tablet - e-commerces */
@media (max-width: 768px) {
    .ecomm-container.collapsed {
        max-height: 220px; /* Altura ajustada para mobile - mostra mais logos */
    }
    
    .ecomm-container.expanded {
        max-height: var(--ecomm-expanded-height, 400px);
        transition: max-height 1.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .ecomm-mask {
        height: 80px; /* Máscara maior em mobile também */
    }
    
    .show-all-ecomm-btn {
        padding: 4px 20px;
        font-size: 12px;
    }
}


/*
* ----------------------------------------------------------------------------------------
* 16.BLOG CSS STYLE
* ----------------------------------------------------------------------------------------
*/

/* .blog-area {} */

.blog-list {
    margin-top: 30px;
}

.feedEkList li {
    box-shadow: 0px 0px 70px rgba(29, 24, 24, 0.09);
    list-style: none;
    float: left;
    max-width: 360px;
    padding: 14px;
    margin: 0 0 16px 16px;
}

#blog-rss .itemTitle a, .itemTitle a:hover {
    color: #ffc122;
    font-style: italic;
}

#blog-rss .itemMore {
    text-align: right;
}

#blog-rss .itemMore a {
    color: #666;
    font-style: italic;
}

#blog-rss .itemMore a:hover {
    color: #ffc122;
}

#blog-rss .itemDate {
    font-style: italic;
}

#blog-rss .itemContent {
    font-style: italic;
    line-height: 22px;
}


/*
* ----------------------------------------------------------------------------------------
* 17. PARTNERS FOOTER CSS STYLE
* ----------------------------------------------------------------------------------------
*/

#partners-logo .col-md-1 {
    width: 14%;
}

/*
* ----------------------------------------------------------------------------------------
* 18.NA MIDIA CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.namidia-list {
    margin-top: 30px;
}

.namidiaList li {
    box-shadow: -7px 8px 6px 0px rgb(0 0 0 / 10%);
    list-style: none;
    float: left;
    /* max-width: 248px; */
    width: 100%;
    min-height: 175px;
    padding: 14px;
    margin: 0 0 10px 10px;
}

#namidia-rss .itemTitle a {
    color: #333;
    font-weight: bold;
    font-style: italic;
}

#namidia-rss .itemTitle a:hover {
    color: #ffc122;
}

#namidia-rss .itemTitle h4 {
    text-align: initial;
}

#namidia-rss .itemMore {
    display: flex;
    justify-content: space-between;
    color: #9d9d9d;
}

#namidia-rss .itemDate {
    font-style: italic;
    line-height: initial;
}

#namidia-rss .itemContent {
    font-style: italic;
    line-height: 22px;
}

#namidia .btnNaMida {
    display: inline-block;
    color: #333;
    background: #F2F2F2;
    padding: 15px 30px;
    text-transform: uppercase;
    font-size: 14px;
    border: none;
    border-radius: 0px;
    font-weight: 600;
    -webkit-transition: .3s;
    transition: .3s;
    letter-spacing: 1px;
    border-radius: 30px;
}

#namidia .btnNaMida:hover {
    background: #f9c434;
    color: #000;
}

/*
* ----------------------------------------------------------------------------------------
* 19.PODCASTS E TV CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.podcastetv-list {
    margin-top: 30px;
}

.podcastetvList li {
    box-shadow: -7px 8px 6px 0px rgb(0 0 0 / 10%);
    list-style: none;
    float: left;
    /* max-width: 248px; */
    width: 100%;
    min-height: 175px;
    padding: 14px;
    margin: 0 0 10px 10px;
}

#podcastetv-rss .itemTitle a {
    color: #333;
    font-weight: bold;
    font-style: italic;
}

#podcastetv-rss .itemTitle a:hover {
    color: #ffc122;
}

#podcastetv-rss .itemTitle h4 {
    text-align: initial;
}

#podcastetv-rss .itemMore {
    display: flex;
    justify-content: space-between;
    color: #9d9d9d;
}

#podcastetv-rss .itemDate {
    font-style: italic;
    line-height: initial;
}

#podcastetv-rss .itemContent {
    font-style: italic;
    line-height: 22px;
}

#podcastetv .btnPodTv {
    display: inline-block;
    color: #333;
    background: #F2F2F2;
    padding: 15px 30px;
    text-transform: uppercase;
    font-size: 14px;
    border: none;
    border-radius: 0px;
    font-weight: 600;
    -webkit-transition: .3s;
    transition: .3s;
    letter-spacing: 1px;
    border-radius: 30px;
}

#podcastetv .btnPodTv:hover {
    background: #f9c434;
    color: #000;
}

/*
* ----------------------------------------------------------------------------------------
* PREVIEW CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.preview-body {
    background: #fafafa;
}

.preview-single-image img {
    width: 100%;
}

.preview-single-image {
    -webkit-transition: 1s;
    transition: 1s;
    box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.preview-single-image:hover {
    -webkit-transition: 1s;
    transition: 1s;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

.preview-single-image h2 {
    font-size: 20px;
    text-align: center;
    color: #000;
    background: #fff;
    margin: 0;
    padding: 30px 20px;
}

.preview-header-top-area {
    padding: 50px 0px;
}

.preview-header-top-area h2 {
    font-size: 60px;
    color: #000;
    text-transform: uppercase;
    font-weight: 900;
}

.preview-header-top-area p {
    color: #333;
    font-size: 30px;
    font-weight: 300;
}


/*
* ----------------------------------------------------------------------------------------
* OTHER GENERAL CSS STYLE
* ----------------------------------------------------------------------------------------
*/

.main h2 {
    color: #000;
}

.main {
    margin-bottom: 180px;
}

.no-captalize {
    text-transform: none!important;
}

.yellowStandout {
    color: #ffc122;
}

.clear {
    clear: both;
}

.italic {
    font-style: italic;
}

h3 .normal {
    font-style: normal;
}

.flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.howto {
    display: flex;
    justify-content: center;
    flex: 0 1 320px;
    margin: 0;
}


#reports h3 { margin-top: 26px; }

.txtsmall-pt {
    font-size: 10px;
    text-align: center;
    display: inline-block;
    width: 100%;
}

/*
* ----------------------------------------------------------------------------------------
* ARROW ANIMATION
* ----------------------------------------------------------------------------------------
*/
.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

/*
* ----------------------------------------------------------------------------------------
* BTN FALE COM ESPECIALISTA
* ----------------------------------------------------------------------------------------
*/
.btns-scroll-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.btn.btn-specialist {
    display: inline-block;
    background: #ffc122;
    color: #202020;
    border-radius: 20px;
    padding: 8px 18px;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
}

/*
* ----------------------------------------------------------------------------------------
* LANGUAGE SELECTOR
* ----------------------------------------------------------------------------------------
*/
.language {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: flex-end;
    gap: 8px;
    position: absolute;
    top: 4px;
    right: 12px;
    z-index: 10;
    color: #fff;
    height: 30px;
    width: 100%;
}

.textlang a {
    color: #fff;
    text-decoration: none;
}

.textlang a:hover {
    color: #FECF35;
}

.textlang.off {
    color: #fff;
    font-weight: normal;
    font-size: 13.4px;
    padding-top: 1px;
}

.textlang.on {
    color: #FECF35;
    font-weight: bold;
    padding-top: 1px;
}

.header-top-area.menu-bg .language .textlang, .header-top-area.menu-bg .language .textlang a {
    color: #202020;
}

.header-top-area.menu-bg .language .textlang.off {
    padding-top: 1px;
}

.header-top-area.menu-bg .language .textlang.on {
    color: #FECF35;
    text-shadow:
    1px 1px 1px #1F1F1F,
    2px 2px 2px #1F1F1F,
    0px 0px 4px #1F1F1F;
    padding-top: 1px;
}

.header-top-area.menu-bg .language .textlang a:hover {
    font-weight: bold;
    color: #FECF35;
}

.legendasDepoimentos {
    display: flex;
    justify-content: center;
}
.tooltipDepoimentos {
    cursor: pointer;
}

/* Custom menu adjustments */
@media only screen and (max-width: 1200px) {
    /* Centralizar o menu na tela */
    .mainmenu {
        display: flex;
        justify-content: center;
    }
}

/*Fancybox for Mobile - Media Queries*/
@media only screen and (max-width: 768px) {
    .fancybox-slide {
        padding: 16px!important;
    }

    .fancybox-toolbar {
        right: 16px!important;
        top: 16px!important;
    }
}

/* ========================================================================
   VIDEO TESTIMONIAL MODAL - THUMBNAILS
   ======================================================================== */

/* Container do flexCenter para vídeos */
.single-testimonial .flexCenter {
    width: 100%;
}

/* Link do vídeo */
.video-testimonial-modal {
    text-decoration: none;
    display: block;
    width: 100%;
}

.video-testimonial-modal:hover {
    text-decoration: none;
}

/* Container do thumbnail */
.video-thumbnail-wrapper {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Fallback para navegadores sem suporte a aspect-ratio */
@supports not (aspect-ratio: 4 / 5) {
    .video-thumbnail-wrapper {
        height: 0;
        padding-bottom: 125%; /* 4:5 = 125% */
    }
    
    .video-thumbnail-wrapper > img,
    .video-thumbnail-wrapper > .play-button-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Imagem do thumbnail */
.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay com botão play */
.play-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* Ícone do play */
.play-button-overlay i {
    font-size: 72px;
    color: #FEC124;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Hover effects */
.video-thumbnail-wrapper:hover .play-button-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.video-thumbnail-wrapper:hover .play-button-overlay i {
    transform: scale(1.1);
    color: #FFD54F;
    text-shadow: 0 0 20px rgba(255, 213, 79, 0.8),
                 0 0 30px rgba(255, 213, 79, 0.6),
                 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Estilo do modal */
.mfp-fade.mfp-bg {
    opacity: 0;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/* Responsivo */
@media only screen and (max-width: 768px) {
    .play-button-overlay i {
        font-size: 56px;
    }
}

@media only screen and (max-width: 480px) {
    .play-button-overlay i {
        font-size: 48px;
    }
}

/* ========================================================================
   MAGNIFIC POPUP - TAMANHO MAIOR PARA VÍDEOS
   ======================================================================== */

/* Aumenta o tamanho máximo do modal de vídeo */
.mfp-iframe-holder .mfp-content {
    max-width: 1400px;
    width: 90%;
}

/* Desktop grande - modal bem maior */
@media only screen and (min-width: 1600px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 1600px;
        width: 85%;
    }
}

/* Desktop médio - modal grande */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 1400px;
        width: 90%;
    }
}

/* Desktop pequeno / Laptop */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 1100px;
        width: 92%;
    }
}

/* Tablet landscape */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 900px;
        width: 95%;
    }
}

/* Tablet portrait e mobile */
@media only screen and (max-width: 767px) {
    .mfp-iframe-holder .mfp-content {
        width: 95%;
    }
    
    /* IMPORTANTE: Muda proporção do player para VERTICAL (9:16) em mobile */
    .mfp-iframe-scaler {
        padding-top: 177.78% !important; /* 9:16 = proporção vertical */
        max-width: 100%;
    }
    
    /* Centraliza o player */
    .mfp-iframe-holder {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Tablet portrait específico - proporção intermediária */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .mfp-iframe-scaler {
        padding-top: 133% !important; /* 3:4 = proporção intermediária */
    }
}

/* Mobile pequeno - maximiza espaço vertical */
@media only screen and (max-width: 599px) {
    .mfp-iframe-scaler {
        padding-top: 177.78% !important; /* 9:16 = máximo vertical */
    }
    
    .mfp-iframe-holder {
        padding-top: 40px; /* Reduz padding superior em mobile */
    }
    
    .mfp-iframe-holder .mfp-content {
        width: 98%; /* Ocupa quase toda largura */
    }
}