
:root{
  --flex-primary-light: #6AAA9C;
  --flex-secondary-light: #E3CCB8;
}

.text-primary-light   { color: var(--flex-primary-light) }
.bg-primary-light     { background: var(--flex-primary-light) }

.text-secondary-light { color: var(--flex-secondary-light) }
.bg-secondary-light   { background: var(--flex-secondary-light) }

body { background: #F9F9F9 }

.navbar{
  --flex-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28169,97,74%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar,
.navbar-collapse,
.navbar-nav {
  position: relative !important;
  overflow: visible !important;
  z-index: 1000;
}

header .navbar-toggler { border: 0 }

header.navbar {
  /* --flex-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); */
  --flex-navbar-toggler-border-color: rgba(0,0,0,.5);
  --flex-navbar-padding-y: 1rem }

header .nav-link {
  color: var(--flex-primary);
  transition: 300ms all;
}

header .nav-link:hover,
header .nav-link.active {
  color: var(--flex-secondary) !important;
}

@media(min-width:992px){ 
  .navbar-brand img { width: 200px }

}

@media(max-width:991.98px){

    .navbar-brand img { height: 60px }
  
    header .navbar-collapse { 
      background: #FFF;
      width: 100%;
      position: fixed;
      z-index: 100000;
      top: 0;
      left: 0  }
  
    header .navbar-nav {
      justify-content: center;
      width: 100%;
      height: 100vh }  
  
    header .nav-link { 
      text-align: center;
      padding: .75rem 3rem !important; 
      width: 100% }

    header a { font-size: 120% !important }

    header .dropdown { width: 100% }

    header .dropdown-menu {
      z-index: 9999 !important; 
      /*position: absolute !important;*/
      border: 0;
      border-radius: 0;
      width: 100%;
      background-color: rgba(0,0,0,.125) }

    header .dropdown-menu a { 
      text-align: center;
      padding: .5rem 1rem;
      color: #FFF }
}

.bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-cover,
.object-fit-cover  { 
  width: 100%;
  height: 100%;
  }

.btn { 
  padding: 1rem 1.5rem;
  transition: all 300ms;
  letter-spacing: 0;
  font-weight: bold  }

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus { color: #FFF !important }

.posts .col > article { 
  top: 0;
  transition: all 300ms }

.posts .col > article:hover {
  background: #FFF;
  top: -.5rem;
  box-shadow: 0 0 0 1.5rem rgba(255,255,255,1), 0 .5rem 2rem 1.5rem rgba(0,0,0,0.075)
}

.carousel-control-prev-icon {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") }

#services article .position-relative {
  padding-top: 15vh !important;
  background: rgb(51,51,51);
  background: linear-gradient(360deg, rgba(var(--flex-primary-rgb),.85) 0%, rgba(var(--flex-primary-rgb),0) 100%) }

@media(max-width:767.98px){
  #services article .position-relative {
    padding-top: 20vh !important 
  }
}

.carousel-item.wrapper {
    height: 75vh; /* Ou a altura que você já usa */
    position: relative;
}

#services article img {
  transition: 300ms all;
  opacity: .75;
  mix-blend-mode: soft-light }

#services article:hover img {  opacity: 1 }

.shadow {
  box-shadow: 0 .5rem 1rem rgba(var(--flex-primary-rgb),0.05) !important
}

.home #donate .container {
  background: url(img/bg-donate.webp);
  background-size: cover
}

.inner #donate {
  background: url(img/bg-donate.webp);
  background-size: cover
}

@media(max-width:767.98px){
  .rounded-10 { border-radius: 3rem }
  
  #sus .display {
    line-height: 20vw;
    letter-spacing: -.25rem;
    font-size: 20vw
  }
  
}

@media(min-width:768px){
  .rounded-10 { border-radius: 5rem }
  
  #sus .display {
    letter-spacing: -.75rem;
    font-size: 8vw
  }
}

.accordion-button {
  box-shadow: none !important
}

.toast-error {
  background-color: #BD362F !important;
}

.toast-success {
  background-color: #51A351 !important;
}

#ui-datepicker-div{
  z-index: 2 !important;
}


#timeline .avatar { min-width: 96px }

#timeline .accordion-body > .d-flex .avatar { position: relative }

#timeline .accordion-body > .d-flex .avatar:before { 
    content: "";
    width: 2px;
    background: var(--flex-primary);
    height: 100%;
    left: 50%;
    bottom: -2.5rem;
    transform: translateX(-50%);
    position: absolute
}

@media(min-width:768px){
    #timeline .accordion-body > .d-flex { 
        position: relative;
        height: 312px }
        
    #timeline .accordion-body > .d-flex > div { position: relative }

    #timeline .accordion-body > .d-flex > div:nth-child(even) {
        position:relative;
        left: 12.5%
    }

    #timeline .accordion-body > .d-flex > div:nth-child(even) .avatar:before {
        top: -2.5rem;
        bottom: 0 }

    #timeline .accordion-body {
        background: url(img/bg-timeline.jpg) repeat-x center calc(50% - .5rem)
    }
}

#top ul a:active{
  color: #fff !important;
}