/* 
template name: bahiatecsolar sp2024
template author: @oxe.digital
Template Site: https://bahiatecsolar.com.br/edicao/saopaulo2024

1. default
2. navbar
3. hero
4. about
5. solucoes
6. cta  
7. atributos

*/

/* ===== 1. default ===== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Raleway:wght@300;600;700&display=swap');

:root {
    --bg-general: #ffffff;
    --bg-emphasis: #edf3fa;
    --font-family-general: 'Open Sans', sans-serif;
    --font-family-emphasis: "Raleway", sans-serif;
    --scroll-html-main: 50px;
    --color-primary: #51A8B1;
    --title-color: #333333;
    --title-color-blue: #004C74;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #51A8B1;
    --bs-btn-border-color: #51A8B1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #307A82;
    --bs-btn-hover-border-color: #307A82;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #307A82;
    --bs-btn-active-border-color: #307A82;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #51A8B1;
    --bs-btn-disabled-border-color: #51A8B1;
    padding: 8px 35px;
    border-radius: 0px;
    font-weight: 500;
}

.btn-outline-primary {
    --bs-btn-color: #51A8B1;
    --bs-btn-border-color: #51A8B1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #51A8B1;
    --bs-btn-hover-border-color: #51A8B1;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #51A8B1;
    --bs-btn-active-border-color: #51A8B1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #51A8B1;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #51A8B1;
    --bs-gradient: none;
    padding: 8px 35px;
    border-radius: 0px;
    font-weight: 500;
}

* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    outline: transparent !important;
    box-shadow: none !important;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--scroll-html-main);
    -webkit-scroll-padding-top: var(--scroll-html-main);
}

body {
    font-family: var(--font-family-general);
    background-color: var(--bg-general);
}

section {
    margin: 20px 0;
}

.loader {
    background: url('../images/branding/spin.svg') 0% 100% no-repeat white;
    z-index: 999999;
}

h1,
h2,
h3,
h4,
h5,
h6,
.lead {
    font-family: var(--font-family-emphasis);
    font-weight: 600;
}

.title {
    padding: 50px 0 30px 0;
}

.title h2 {
    color: var(--title-color);
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

.title h2:after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background: var(--color-primary);
    margin: 10px 0;
}

.box-cookies {
    box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.1) !important;
}

.box-cookies.hide {
    border-radius: 1px;
    display: none !important;
}

.modal a {
    text-decoration: none;
}

.bg-sagdas {
    background-color: var(--bg-emphasis);
}

.back-to-top {
    position: fixed;
    display: none;
    padding: 15px 0;
    right: 15px;
    bottom: 15px;
    background: var(--color-primary);
    width: 60px;
    height: 60px;
}

.back-to-top:hover {
    background: #307A82;
}

.back-to-top i {
    font-size: 32px;
    line-height: 32px;
}

/* ===== 2. navbar ===== */

.nav-link {
    font-weight: 700;
}

.nav-link:hover,
.nav-link:active {
    color: var(--color-primary);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--color-primary);
    font-weight: 700;
}

.nav-link:focus {
    color: var(--color-primary);
}

/* ===== 3. hero ===== */

.hero {
    background-color: #304b5b;
}

.hero-img {
    width: 100%;
    min-height: 100vh;
    background: url(../images/banners/hero-bg.jpg) center center;
    background-size: cover;
    position: relative;
    padding: 0;
    z-index: 3;
}

.hero-img:before {
    position: absolute;
    content: "";
    background: rgba(27, 47, 69, 0.7);
    inset: 0;
}

.hero-txt h2 {
    font-size: 36px;
    padding-right: 40px;
}

@media (min-width: 992px) {
    .hero-img:before {
        background: rgba(27, 47, 69, 0.5);
    }
    .hero-txt h2 {
        font-size: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 992px) {
    .hero-txt {
        position: absolute;
        z-index: 99;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ===== 4. about ===== */

.carousel-item {
    height: auto;
}

@media (min-width: 992px) {
    .carousel-item {
            padding: 0;
            height: 430px;
        }
}

.carousel-item h3 {
    color: var(--title-color-blue);
    margin-bottom: 20px;
}

.carousel-control-prev {
    left: -10px;
}

.carousel-control-next {
    right: -10px;
}

.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
}

/* ===== 5. solucoes ===== */

#myTab .nav-link {
    color: var(--title-color-blue);
    background-color: var(--bg-emphasis);
    border-radius: 0;
}

#myTab .active {
    color: white;
    background-color: var(--title-color-blue);
}

#myTabContent .card {
    color: white;
    text-decoration: none;
    height: 260px;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: .5s;
}

.card-title {
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

/* #myTabContent .card:hover {
    transform: scale(1.04);
    transition: .3s;
} */

#myTabContent .card-mentoria {
    background-image: url(../images/solucoes/mentoria-sistemica.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 260px;
    background-size: 130%;
}

#myTabContent .card-imersao {
    background-image: url(../images/solucoes/imersao.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 260px;
    background-size: 130%;
}

#myTabContent .card-mapa {
    background-image: url(../images/solucoes/mapa.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 260px;
    background-size: 130%;
}

#myTabContent .card-gestao {
    background-image: url(../images/solucoes/gestao.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 260px;
    background-size: 130%;
}

#myTabContent .card-lideranca {
    background-image: url(../images/solucoes/lideranca.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 260px;
    background-size: 130%;
}

#myTabContent .card-felicidade {
    background-image: url(../images/solucoes/felicidade.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 260px;
    background-size: 130%;
}

#myTabContent .card-clima {
    background-image: url(../images/solucoes/clima.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 260px;
    background-size: 130%;
}

#myTabContent .card-planejamento {
    background-image: url(../images/solucoes/planejamento.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 260px;
    background-size: 130%;
}

#myTabContent .card-mentoria:hover,
#myTabContent .card-imersao:hover,
#myTabContent .card-mapa:hover,
#myTabContent .card-gestao:hover,
#myTabContent .card-lideranca:hover,
#myTabContent .card-felicidade:hover,
#myTabContent .card-clima:hover,
#myTabContent .card-planejamento:hover {
    background-size: 150%;
}

.modal-title {
    padding-right: 30px;
}

.modal-footer {
    justify-content: flex-start !Important;
}

/* ===== 6. cta ===== */

.cta {
    background-color: var(--bg-emphasis);
}

/* ===== 7. atributos ===== */

#atributos-especiais .card {
    position: relative;
    height: 130px;
    border-radius: 0;
    margin-bottom: 12px;
    margin-top: 0;
    transition: .3s;
}

#atributos-especiais .card:hover {
    position: relative;
    margin-top: -5px;
}

#atributos-especiais i {
    display: block;
    text-align: center;
    margin-top: -45px;
    margin-left: auto;
    margin-right: auto;
    font-size: 42px;
    color: var(--color-primary);
    background-color: white;
    width: 50px;
    height: 50px;
}

/* ===== 8. cases ===== */

/* ===== 9. contato ===== */

#contato i {
    font-size: 26px;
    color: var(--color-primary);
}

#contato h5 {
    margin-bottom: 5px;
}

#contato a {
    text-decoration: none;
}

/* ===== 10. footer ===== */

footer {
    background-color: var(--bg-emphasis);
}

footer li {
    margin: 7px;
}

footer a {
    font-weight: 600;
    color: black;
    text-decoration: none;
}

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