:root {
    --cor-azul-escuro: 23, 23, 46;
    --cor-preto: 2, 2, 3;
    --cor-verde: 106, 180, 45;
    --cor-ciano: 40, 181, 184;
}
  
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--cor-verde)) rgb(var(--cor-preto));
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

*::-webkit-scrollbar-track {
    background: transparent;
    padding: 2px
}

*::-webkit-scrollbar-thumb {
    background-color: rgb(0,0,0);
    border-radius: 10px;
    height: 4px
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans', sans-serif;
   overflow-x: hidden;
}

.header {
    width: 100vw;
}

.bg-header {
    background: rgba(153, 153, 153, 0.647);
    /*backdrop-filter: blur(10.7px);*/
}

.bg-verde {
    background-color: rgba(var(--cor-verde),var(--bs-bg-opacity))!important;
}

.bg-preto {
    background-color: rgba(var(--cor-preto),var(--bs-bg-opacity))!important;
}

.bg-azul-escuro {
    background-color: rgba(var(--cor-azul-escuro),var(--bs-bg-opacity))!important;
}

.bg-ciano {
    background-color: rgba(var(--cor-ciano),var(--bs-bg-opacity))!important;
}

.text-verde {
    --bs-text-opacity: 1;
    color: rgba(var(--cor-verde),var(--bs-text-opacity))!important;
}

.text-ciano {
    --bs-text-opacity: 1;
    color: rgba(var(--cor-ciano),var(--bs-text-opacity))!important;
}


.text-azul-escuro {
    --bs-text-opacity: 1;
    color: rgba(var(--cor-azul-escuro),var(--bs-text-opacity))!important;
}

.bg-gradiente {  
    background: linear-gradient(180deg, rgb(var(--cor-azul-escuro)) 0%, rgb(var(--cor-preto)) 100%);
}

.btn-azul-escuro {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(var(--cor-azul-escuro));
    --bs-btn-border-color: rgb(var(--cor-azul-escuro));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg:  rgb(var(--cor-ciano));
    --bs-btn-hover-border-color: rgb(var(--cor-ciano));
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--cor-ciano));
    --bs-btn-active-border-color: rgb(var(--cor-ciano));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(var(--cor-azul-escuro),0.5);
    --bs-btn-disabled-border-color: rgba(var(--cor-azul-escuro),0.5);
}

.header .nav-link::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: rgb(var(--cor-ciano));
    transition: all ease .3s
}

.nav-link.nivel-1 {
    --bs-nav-link-color: rgb(255,255,255);
    --bs-navbar-active-color: rgba(var(--cor-ciano),1);
    --bs-nav-link-hover-color: rgba(var(--cor-ciano),1)
}

.header .nav-link:hover::before,.header .nav-link:active::before,.header .nav-link:focus::before {
    width: 100%;
    left: 0;
    right: auto
}

.quem-somos-svg {
    max-height: 200px;
}

.pilar-svg {
    width: 100px;
    height: 100px;
}

.card-pilar {
    transition: 200ms;
}

.links-contatos a {
    width: fit-content;
}

.hexagon-svg img{
    top: -40%;
    transform: rotate(90deg);
}

.card-ecossistema {
    background: linear-gradient(90deg, rgb(var(--cor-azul-escuro)) 0%, rgba(var(--cor-azul-escuro),0) 100%);
}

.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after,
 .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
    content: none;
}

.form-control::-webkit-inner-spin-button,
.form-control::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-control {
    -moz-appearance: textfield;
}

.form-block {
    height: 120%;
    top: -10%;
}

@media screen and (min-width: 992px){
    body {
        overflow-x: unset;
    }
    .quem-somos-svg {
        max-height: unset;
    }

    .card-pilar:hover {
        transform: translateY(-10px) !important;
    }

    .hexagon-svg img{
        top: -20%;
        transform: rotate(0deg);
        height: 150%;
    }
    
    .animation-block {
        width: 75%;
    }
}

@media screen and (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1380px;
    }
}