:root {
    --bs-blue: #4682A0;
    --bs-primary: #4682A0;
    --bs-primary-rgb: 70, 130, 160;

    --bs-secondary: #4682A0;
    --bs-secondary-rgb: 70, 130, 160;

    --bs-gradient: linear-gradient(180deg, rgba(70, 130, 160, 0.8), rgba(70, 130, 160, 0));
    --bs-font-sans-serif: "Plus Jakarta Sans";
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
}

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* sobrescrita de configuracoes padroes do bootstrap */

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    padding-top: 5.5rem;
}

.btn-primary {
    --bs-btn-bg: #4682A0;
    --bs-btn-border-color: #4682A0;
    --bs-btn-hover-bg: #3c6e88;
    --bs-btn-hover-border-color: #38647b;
    --bs-btn-focus-shadow-rgb: 70, 130, 160;
    --bs-btn-active-bg: #38647b;
    --bs-btn-active-border-color: #345a70;
    --bs-btn-disabled-bg: #4682A0;
    --bs-btn-disabled-border-color: #4682A0;
}

.bg-gradient-primary-to-secondary {
    background: #4682A0;
    background: linear-gradient(135deg, #4682A0 0%, #2C536B 100%);
}

.text-gradient {
    background-image: linear-gradient(180deg, #4682A0 0%, #2C536B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.meu-texto-gradiente-projetos {
    background-image: linear-gradient(180deg, #4682A0, #D6E3EA);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.site-navbar {
    transition: box-shadow 0.2s ease;
    z-index: 1030;
}

.site-navbar .navbar-brand {
    letter-spacing: 0.02em;
}

.site-navbar .nav-link {
    color: var(--bs-gray-700);
}

.site-navbar .nav-link.active,
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: var(--bs-primary);
}
@media (max-width: 991.98px) {
    body.site-page {
        padding-top: 4.75rem;
    }

}

.envelope{
    width: 20px;
}

.carousel-tamanho{
    width: 100%;
    
}


/*
Classes e media querys criadas por um colaborador.
Acima delas, explicarei o motivo de as ter adicionado.
Caso adicione outras, peço que faça o mesmo: 
informe o motivo acima delas, utilizando comentários
*/

/* classes para debug */

.verde {
    border: 2px solid green;
}

.vermei {
    border: 2px solid rgb(128, 0, 0);
}

.teste{
    height: 1200px;
}

/* cor titulos */

.titulo-gpca-gradiente {
    color: #4682A0;
    -webkit-text-fill-color: #4682A0;
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: unset;
}

.color-white{
    color: white;
}

/* cor fundos */

.bg-blue{
    background-color: var(--bs-blue);
}

/* cor bordas */

.border-div{
    border: 5px solid #2C536B;
}

/* Abaixo, estão as coordenadas da logo parceiros.svg em relação à a coluna da direita. Escolhi valores que a deixasse no canto inferior esquerdo
da logo do gpca. Mais tarde, medias querys serão adicionadas, ajustando as propriedades "bottom" e "left" conforme
a largura da tela e logo diminui: */

#parceiros{
    bottom: 20px;
    left: 30px;
  
}

.tamanhoparceiros{
    height: 80px;
}

/* Tamanho da logo do IFB na sessão 'sobre' em index.html*/

.logoifb{
    height: 200px;
}

/*logo do GPCA da hero section */

#heroGPCA{
    height: 100%;
    /* Bottom 60px, pois esta logo está setada como posicion-relative, e 60px é o suficiente pra dar
    à logo um efeito de estar mais próxima ao nav que o restante dos elementos de sua linha (h1 do site, etc) */
    bottom: 70px;
    left: -30px;
}



.pos{
     bottom: 60px;
}

/* Faz com que a largura de uma div se limite aos elementos dentro dela */

.caixa-enxuta{
    width: fit-content;
}

/* fundo onde estamos */

.bg-fachada {
    position: relative;
    /* O gradiente principal fica no elemento pai */
    background-image: radial-gradient(#F8F9FA, #F8F9FA); 
    z-index: 1;
    overflow: hidden;
    
}

.bg-fachada::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    background-image: url(../assets/img/gerais/fachada-ifb.jpg);
    background-position: 50% 43%;
    background-size: 3000px; 
    opacity: 0.15;
    z-index: -1; 
    right: 50%;
    left: 50%;
    transform: translateX(-50%);

    width: 100vw;

}

/* logo gpca carousel */

.pos-div-logo-carousel{
    right: -30px;
    top: -30px;
}

.logo-carousel{
     width: 80px;
}
.carousel-item img{
    height: 400px;
    object-fit: cover;
}
.obj-pos-top{
    object-position: top;
}

@media (width < 576px) {
    .carousel-item img{
        max-height: 60vw; 
        object-fit: cover;
    }
    .obj-pos-top{ 
        object-position: 0px 0px;
    }
}

@media (576px <= width < 768px) {
    .carousel-item img{
        max-height: 320px;
    }
    .obj-pos-top{ 
        object-position: 0px 0px;
    }
}

@media (768px <= width < 992px) {
    .carousel-item img{
        max-height: 70vw; 
    }
    .obj-pos-top{ 
        object-position: 0px 0px;
    }
}

@media (992px <= width < 1200px) {
    .carousel-tamanho{
        width: 800px;
    }
    .carousel-item img{
        height: 450px;
    }
    .obj-pos-top{
        object-position: 0px -30px;
    }
}

@media screen and (1200px <= width < 1400px) {
    .carousel-item img{
        height: 340px;
    }
}







/* PROJETOS.HTML */



.tamanho-logo-projetos{
    height: 300px;
}

/* EQUIPE.HTML */

.foto-integrante{
    width: 110px;
    height: 110px; 
    object-fit: cover;
}

/* CONTATOS.HTML  */

#contatos{
    height: 100%;
    max-height: 1000px;
}

.card-contato{
    height: 100%;
}

/*
Fim das classes adicionadas
*/

/* responsividade de cada pagina do site */ 

/* index.html:  */
@media (max-width: 992px){

    #bgheader{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        
        background-image: url(../assets/logos/gpcaSVG.svg);
        background-repeat: no-repeat;
        background-position: calc(-100vw/2) 43%;
        background-size: calc(1000px + (100vw)); 
        opacity: 0.08;
        z-index: -1; 
        right: 50%;
        left: 50%;
        transform: translateX(-50%);

        width: 100%;
        height: 100%;
    
    }
    

    #heroGPCA{
        position: static !important;
        display: none;
    }

    .tamanhoparceiros{
        height: 50px;
    }

    .bg-fachada::before {
        background-position: 40% 43%;
        background-size: calc(3000px + (100vw)); 
    }

    .logoifb{
        height: 120px;
    }

    /* projetos.html */

    .order-1-mobile{
        order: 1;
    }

    .order-2-mobile{
        order: 2;
    }
}