@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html, body {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    margin: 0 auto;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    cursor: pointer !important;
}
/* General Styles */
.high-lighter {
    color: #FFEA01;
}

.high-lighter-off {
    color: white;
}

.btn-call-whatsapp {
    background-color: #FFEA01;
    color: #000000;
    border-radius: 20px;
    padding: 8px 26px 8px 26px;
    font-weight: 600;
    text-decoration: none;
}

.btn-call-whatsapp:hover {
    background-color: #fffa03;
    color: #3a3a38;
}

#location-company p{
    font-size: 11pt;
    line-height: initial
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 60px;
    height: 60px;
}

    .whatsapp-float img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.more-info-btn {
    background-color: #3a3a38 !important;
    color: white !important;
    text-decoration: none !important;
    padding: 8px 20px 8px 20px;
    font-weight: 400;
    border-radius: 20px;
    font-size: 12px !important;
}

    .more-info-btn:hover {
        background-color: #545244 !important;
    }

/* Main Menu */
#menu-site {
}
/* Ajuste o espaçamento pra não dar sobreposição no conteúdo */
#main-menu.fixed-top {
    top: 0;
    width: 100%;
    z-index: 1050;
}
#menu-site #header-top {
    background-color: #3a3a38;
}
    #menu-site #header-top li {
        color: white;
        font-size: 11px;
    }

    #menu-site #header-top img {
        width: 20px
    }

    #menu-site #main-menu #navbarNav li a {
        text-decoration: none;
        color: #545244;
        font-size: 16px;
        font-weight: 500;
    }

        #menu-site #main-menu #navbarNav li a:hover {
            color: #808080;
        }


/* Main Banner */
#main-banner #slide-banner-1, #main-banner #slide-banner-2 {
    padding: 120px 0;
}

#main-banner #slide-banner-1 {
    background: url('../images/hero/hero-banner3 1.png') no-repeat center center;
    background-size: cover;
    width: 100%;
}

#main-banner #slide-banner-2 {
    background: url('../images/hero/hero.png') no-repeat center center;
    background-size: cover;
    width: 100%;
}

#main-banner #slide-banner-1 .banner-title h2 {
    font-weight: bolder;
    color: white;
    font-size: 32pt;
}

#main-banner #slide-banner-2 .banner-title h2 {
    font-weight: bolder;
    color: white;
    font-size: 32pt;
}

    #main-banner .banner-title ul li {
        color: #FFEA01;
        font-weight: 600
    }

#container-card-energy-company {
    position: relative;
    top: -60px;
    height: fit-content;
}

#card-energy-company {
    background-color: #FFEA01;
    border-radius: 4px;
    padding: 8px 26px 8px 26px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    #card-energy-company h5 {
        font-size: 15px;
    }

    #card-energy-company p{
        font-size: 13px;
    }


.carousel-indicators .active {
    background-color: #FFEA01; /* cor do ponto ativo */
}

@media (max-width: 767.98px) {
    /* Reduz o espaço vertical no mobile */
    #main-banner #slide-banner-1,
    #main-banner #slide-banner-2 {
        padding: 80px 0;
    }

    #main-banner #slide-banner-1 {
        background: url('../images/hero/hero-banner3 1.png') no-repeat center left;
        background-size: cover;
        width: 100%;
    }

    #main-banner #slide-banner-2 {
        background: url('../images/hero/hero.png') no-repeat center center;
        background-size: cover;
        width: 100%;
    }

    /* Diminui o tamanho do título no mobile */
    #main-banner #slide-banner-1 .banner-title h2 {
        font-size: 20pt;
        text-align: start;
        margin-bottom: 20px
    }

    #main-banner #slide-banner-2 .banner-title h2 {
        font-size: 20pt;
        text-align: start;
        margin-bottom: 20px
    }

    /* Centraliza a lista de itens do banner */
    #main-banner .banner-title ul {
        padding-left: 0;
        text-align: center;
    }

        #main-banner .banner-title ul li {
            justify-content: start;
            display: flex;
            font-size: 14pt;
        }

    /* Botão centralizado */
    #main-banner .banner-title a.btn-call-whatsapp {
        display: inline-block;
        margin: 0 auto;
    }

    /* Ajuste no card inferior */
    /* Remove o comportamento de container no mobile */
    #container-card-energy-company {
        width: 100%;
        margin: 0;
        padding: 0;
        justify-content: center !important;
        top: 0; /* mantém o ajuste que já fizemos */
    }

    #card-energy-company {
        border-radius: 0;
        width: 100%;
        padding: 16px;
        box-shadow: none; /* opcional: para ficar flat no mobile */
        text-align: center;
    }

        #card-energy-company h5 {
            justify-content: center;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        #card-energy-company p {
            font-size: 12px;
        }
}



/* About */

#about {
    background: url("../images/about/about-bg.png") no-repeat center top;
    background-size: cover;
    padding: 120px 0 120px 0;
}

#about p{
    font-size: 16px;
    margin-bottom: 25px
}

    #about h5 {
        color:white;
        font-weight: 700;

    }
    #about h2 {
        color: #3A3A38;
        font-weight: 700;
        font-size: 23pt;
        margin-bottom: 40px;
    }

#location-section{
    margin-top: -50px;
}

@media (max-width: 767.98px) {
    /* Localização - onde estamos */
    #location-company {
        text-align: center;
    }

    section.pt-4.pb-4 .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
    }

    section.pt-4.pb-4 img {
        margin-bottom: 12px;
        margin-right: 0;
    }

    #about {
        padding: 60px 10px 60px 10px; /* menos espaço no mobile */
        background-position: center right;
        background-size: cover;
    }

        #about h2 {
            font-size: 21pt; /* título um pouco menor */
            text-align: center;
        }

        #about h5 {
            text-align: center;
        }

        #about p {
            text-align: center;
            font-size: 15px;
        }

        #about article {
            padding-left: 0 !important; /* remove o ps-5 */
            padding-right: 0;
        }

    #location-section {
        margin-top: 0;
    }

    /* Botão de portfólio */
    .more-info-btn {
        display: block;
        margin: 20px auto 0 auto;
        text-align: center;
    }
}

/* Portfolio */
#portfolio {
    padding: 150px 0 150px 0;
}

    #portfolio h5 {
        color: #A1A19A;
        font-weight: 700;
        font-size: 11pt;
    }

    #portfolio h1 {
        font-size: 48pt;
        font-weight: 700
    }

    #portfolio h4 {
        font-size: 14pt;
        font-weight: 800;
        color: #3a3a38;
    }

.carousel-container {
    width: 100%;
    overflow: hidden;
    margin-top: 60px;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item-custom {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 0.5rem;
    box-sizing: border-box;
    transform: scale(0.7);
    opacity: 0.7;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

    .carousel-item-custom.active {
        transform: scale(1);
        opacity: 1;
        z-index: 2;
    }

    .carousel-item-custom img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 1.5rem; /* Mais curvado pra dar o efeito de tablet */
        border: solid 14px #000000; /* Borda preta tipo moldura de tablet */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra bonita */
        box-sizing: border-box;
    }

.carousel-arrow {
    font-size: 2rem;
    color: #333;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}

    .carousel-arrow:hover {
        color: #000;
        transform: scale(1.2);
    }

.carousel-arrow {
    font-size: 2rem;
    color: #333;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}

    .carousel-arrow:hover {
        color: #000;
        transform: scale(1.2);
    }
@media (max-width: 767.98px) {

    #portfolio {
        padding: 80px 0;
    }

        #portfolio h1 {
            font-size: 28pt;
        }

        #portfolio h4 {
            font-size: 12pt;
        }

    .carousel-container {
        margin-top: 40px;
    }

    .carousel-item-custom {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0.5rem;
        transform: scale(1);
        opacity: 1;
    }

        .carousel-item-custom img {
            border: solid 12px #000000;
            border-radius: 1rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* sombra mais leve no mobile */
        }

    .carousel-controls {
        margin-top: 20px;
    }

    .carousel-arrow {
        font-size: 1.8rem;
    }
}

/* Benefits */
#benefits {
    margin-bottom: 120px;
}

    #benefits h1 {
        font-weight: 700;
        font-size: 40pt
    }

#banner-benefits {
    padding: 120px 0 120px 0;
    background: url('../images/benefits/banner-benefits.png') no-repeat center top;
    background-size: cover;
    width: 100%;
}

#cards-benefits {
    margin-bottom: 40px;
}

    #cards-benefits img {
        margin-top: -30px;
    }

    #cards-benefits h5 {
        font-weight: 700;
        color: #3a3a38;
        margin-bottom: 10px;
    }

    #cards-benefits p {
        font-size: 11pt;
        color: #3a3a38;
    }
@media (max-width: 767.98px) {
    /* Ajuste do banner principal */
    #banner-benefits {
        padding: 60px 10px;
        background-position: center center;
        background-size: cover;
        text-align: center;
    }

    #benefits h1 {
        font-size: 20pt;
        line-height: 1.3;
    }

    /* Cards de benefícios */
    #cards-benefits {
        margin-top: 40px;
    }

        #cards-benefits .col-md-3 {
            flex: 0 0 100%;
            max-width: 100%;
            border: none !important;
            margin-bottom: 40px;
            text-align: center;
        }

        #cards-benefits img {
            margin-top: 0;
            margin-bottom: 20px;
            width: 48px;
        }

        #cards-benefits h5 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        #cards-benefits p {
            font-size: 15px;
            padding: 0 10px;
        }

    /* Botão de WhatsApp */
    .btn-call-whatsapp {
        font-size: 16px;
        padding: 12px 24px;
        margin-top: 20px;
    }
}



/* Solutions */
#solutions {
    padding: 120px 0 120px 0;
    background: url('../images/solutions/solutions.png') no-repeat center top;
    background-size: cover;
    width: 100%;
}

#solutions h1{
    color: white;
    font-weight: 700;
    font-size: 40pt
}

#solutions .card-styles-solutions{
    padding: 24px 6px 24px 6px;
}

    #solutions .card-styles-solutions h5 {
        font-weight: 700;
        font-size: 12pt;
        margin-bottom: 12px;
    }
    #solutions p{
        font-size: 10pt;
    }
    #solutions #card-style-first {
        background-color: #fffa03
    }
    #solutions #card-style-second {
        background-color: #fffa03
    }
    #solutions #card-style-third {
        background-color: #fffa03
    }
    #solutions #card-style-fourth {
        background-color: #fffa03
    }


@media (max-width: 768px) {
    #solutions {
        padding: 60px 0;
        background-position: center top;
        background-size: cover;
    }

        #solutions h1 {
            font-size: 22pt;
            text-align: center;
            line-height: 1.3;
            padding: 0 10px;
        }

        #solutions .card-group {
            flex-direction: column;
            gap: 24px;
        }

        #solutions .card-styles-solutions {
            padding: 20px;
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            margin-bottom: 20px;
        }

            #solutions .card-styles-solutions img {
                width: 60px;
                margin-bottom: 20px;
            }

            #solutions .card-styles-solutions h5 {
                font-size: 16px;
                text-align: center;
            }

        #solutions p {
            font-size: 13px;
            text-align: center;
        }
}



/* Contact */
#contact {
    padding: 150px 0;
}

    #contact h1{
        font-weight: 700;
        font-size: 48pt;
        margin-bottom: 60px;
    }

    #contact h6 {
        font-weight: 600;
        font-size: 12pt;
        margin-bottom: 30px;
    }

    #contact span, a , p{
        font-size: 10pt;
    }

    #contact a{
        text-decoration: none;
        color: #3a3a38

    }

@media (max-width: 768px) {
    #contact {
        padding: 80px 0;
    }

        #contact h1 {
            font-size: 28pt;
            text-align: center;
            margin-bottom: 40px;
        }

        #contact .row {
            flex-direction: column;
            gap: 40px;
        }

        #contact h6 {
            font-size: 14pt;
            text-align: center;
        }

        #contact ul {
            padding-left: 0;
        }

        #contact li {
            text-align: center;
        }

        #contact span, #contact a, #contact p {
            font-size: 12pt;
            text-align: center;
            display: block;
        }

        #contact a {
            font-size: 12pt;
            color: #3a3a38;
            display: inline-block;
            margin-top: 8px;
        }
        #contact #location-contact{
            flex: content;
            justify-content: center;
        }
}


/* Footer */
#footer{
    background-color: #3a3a38;
    padding: 40px 0;
}

    #footer p{
        color: white;
        font-size: 9pt
    }

    #footer .separator {
        width: 100%;
        max-width: 300px;
        border: none;
        border-top: 1px solid #ccc;
        margin: 20px 0;
    }

    #footer-yellow{
        padding:8px 0;
        background-color: #FFEA01
    }