@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');


:root {
     /* --color-primary: #0A254D; */
     --color-primary: rgba(0, 0, 0, 0.8);
     --color-secundary: #FFC451;
     --color-text: #3A3A3A;
     --color-background: #F8F9FA;
     /* --terciaria: #3C9D75;
     --terciaria: #85C1E9; */
     
}

.mytext-secundary {
     color: var(--color-secundary);
     font-weight: bold;
}

/* .primaria-invertida {
     color: #fff;
     font-weight: bold;
} */



/* sobrescrevendo cores do botao primario do bootstrap */
.btn-primary {
     --bs-btn-color: #fff;
     --bs-btn-bg: var(--primaria);
     --bs-btn-border-color: var(--primaria);
     --bs-btn-hover-color: #fff;
     --bs-btn-hover-bg: var(--primaria);
     --bs-btn-hover-border-color: var(--primaria);
     --bs-btn-focus-shadow-rgb: 49, 132, 253;
     --bs-btn-active-color: #fff;
     --bs-btn-active-bg: var(--primaria);
     --bs-btn-active-border-color: var(--primaria);
     --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     --bs-btn-disabled-color: #fff;
     --bs-btn-disabled-bg: var(--primaria);
     --bs-btn-disabled-border-color: var(--primaria);
}


.btn-outline-primary {
     --bs-btn-color: var(--primaria);
     --bs-btn-border-color: var(--primaria);
     --bs-btn-hover-color: #fff;
     --bs-btn-hover-bg: var(--primaria);
     --bs-btn-hover-border-color: var(--primaria);
     --bs-btn-focus-shadow-rgb: 13, 110, 253;
     --bs-btn-active-color: #fff;
     --bs-btn-active-bg: var(--primaria);
     --bs-btn-active-border-color: var(--primaria);
     --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     --bs-btn-disabled-color: var(--primaria);
     --bs-btn-disabled-bg: transparent;
     --bs-btn-disabled-border-color: var(--primaria);
     --bs-gradient: none;
}

/* ------------------------------------ */
body {
     font-family: 'Roboto', sans-serif;
     font-size: 18px;
     background-color: var(--color-primary);
}



 /* slidebar */
 #particles-js.fade-out {
     opacity: 0;
 }

 header {
     position: relative !important;
     /* z-index: 2 !important; */
     background: transparent !important; /* Remova a cor de fundo */
 }

 #info {
     /* min-height: 100vh; */
     min-height: 700px;
     height: 100%;
     position: relative!important;
 }

 #particles-js canvas {
     pointer-events: auto; 
 }
 
 
 #info * {
     pointer-events: auto; /* Mantém interatividade para os elementos internos */
 }
 
 
 

 
 
/* ------------ header ------------- */

/* .navbar {
     border-bottom: solid 1px #f4b3005b;
} */

.navbar,
.nav-link,
.navbar-brand {
     background-color: var(--color-primary) !important;
     color: #fff !important;
}

.nav-link:hover {
     color: var(--color-secundary) !important;
     transition: 0.3s;
}


.navbar-toggler,
.navbar .navbar-toggler-icon {
     color: var(--color-primary) !important;
     background-color: var(--color-secundary) !important;
}

.dropdown-item:hover {
    background-color: var(--color-secundary);
}

/* ------------- section info -------------- */
#info {
    color: #fff;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    /* transition: background-image 1s ease-in-out; */
}

#info::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--color-primary); 
     opacity: 0.6; 
     z-index: 1;
 }

 #info .container {
     position: relative;
     z-index: 2;
 }

.my-primary-title {
    color: var(--color-secundary);
    font-size: calc(1.3rem + .6vw);
}

.info-title {
     color: var(--color-secundary);
     /* font-size: calc(3rem + .6vw);  */
     font-size: 56px; 
}

.info-subtitle {
     font-size: 24px;   
}

.info-text1 {
     min-height: 80px;
}

.my-icons {
    font-size: 38px;
    color: var(--color-primary);
}

#info .my-icons {
     font-size: 38px;
     color: var(--color-secundary);
 }

#info .card {
     background-color: transparent;
     /* border: solid 3px var(--color-secundary); */
     border: 1px solid color-mix(in srgb, var(--color-background), transparent 70%);
}

.card-title {
     color: var(--color-background);
}

.card-link {
     text-decoration: none;
}

#info .card:hover {
     color: var(--color-secundary) !important;
     border: 1px solid color-mix(in srgb, var(--color-secundary), transparent 0%);
     transition: 0.3s;
}

#info .card:hover .card-title{
     color: var(--color-secundary) !important;
     transition: 0.3s;
}


.card:hover {
     background-color: var(--color-secundary);
     transition: 0.3s;
     /* cursor: pointer; */
}

/* ------------ section fale conosco ----- */

#faleconosco {
     background-color: var(--color-primary); 
     color: var(--color-background);
}
 
/* ------------ section about ------------- */

#about {
     background-color: #fff;
}
.my-primary-title-inverse {
     color: var(--color-primary);
     font-size: calc(1.3rem + .6vw);
}

.my-secondary-title {
     color: var(--color-primary);
     font-size: 22px;
}


.card-about:hover {
     background-color: var(--color-secundary);
     border-radius: 7px;
     transition: 0.3s;
     /* cursor: pointer; */
}

/* ------------ section faq --------------- */
#faq {
     background-color: var(--color-background);
     padding: 60px 0;
}

.accordion-body, .accordion-header {
     border: solid 1px var(--color-secundary) !important;
}

.list-group-item-action {
     /* background-color: var(--color-background); */
     /* margin-bottom: 15px; */
}
.list-group-item-action:focus, .list-group-item-action:hover {
     background-color: var(--color-secundary) !important;
}

.accordion-button:not(.collapsed) {
     background-color: var(--color-secundary);
}


/* ------------ section footer -------------------- */
footer {
     background-color: var(--color-primary);
     color: var(--color-background);
}

.footer-line {
     border-top: solid 2px var(--color-secundary);
}


.my-icons-footer {
     font-size: 38px;
     color: var(--color-background);
 }

 .my-icons-footer:hover {
     color: var(--color-secundary);
 }
 

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

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

.footer-info .my-secondary-title {
     color: var(--color-secundary) !important;
}


/* botão flutuante do whatsapp */
.whatsapp-button {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     background-color: #25D366; /* Cor oficial do WhatsApp */
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     text-decoration: none;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease-in-out;
     z-index: 1000;
 }

 .whatsapp-button:hover {
     transform: scale(1.1); /* Efeito de crescimento ao passar o mouse */
 }