.container, 
.container-fluid, 
.container-lg, 
.container-md, 
.container-sm, 
.container-xl, 
.container-xxl {
    --flex-gutter-x: 4rem
}

.bg-gradient-dark {
    background: rgb(50,50,50);
    background: linear-gradient(245deg, rgba(50,50,50,1) 0%, rgba(0,0,0,1) 70%) }

.inner header { background: url(img/bg-hero.webp) no-repeat }

header .nav-link { color: #FFF }

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

.navbar-toggler { 
  border: 0;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  font-size: 100%;
  padding: .75rem .5rem !important }

.navbar-toggler .navbar-toggler-icon { 
  width: 100%;
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--flex-primary) !important }

@media(max-width:1199.98px){
    header .navbar-brand img {
      max-width: 60vw;
      height: auto }
}
  
@media(max-width:991.98px){
    header [class*="container"] { padding: 0 1rem  !important }
  
    header .navbar-collapse { 
      background: var(--flex-primary);
      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%;
      font-size: 120% }
  
    header .nav-item .btn { font-size: 100% }
}

#hero {
    min-height: 800px;
    background: url(img/bg-hero.webp) no-repeat;
    background-size: cover }

@media(min-width:1024px){
    #hero .hero-image {
        bottom: -170px
    }
}

@media(max-width:575.98px){

    .hero-image {
        left: -50%;
        right: auto;
        opacity: .1;
        height: 100%  }

    .hero-image img { height: 100% }
}

#post #gallery a { 
    transition: all 300ms;
    opacity: .5 }

#post #gallery a:hover { opacity: 1 }

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    opacity: .75;
    background: var(--flex-primary);
    margin: auto 3rem
}

.carousel-indicators [data-bs-target] {
    border: 1px solid #FFF;
    width: .75rem;
    height: .75rem;
}

.carousel-indicators .active {
    background: var(--flex-primary);
}

.btn { font-weight:bold }

.btn-outline-white {
    border-color: #FFF !important;
    color: #FFF !important }

.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white:focus{
    color: var(--flex-body-color) !important;
    background: #FFF !important}

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

.btn-whatsapp,
.btn-whatsapp:hover,
.btn-whatsapp:active,
.btn-whatsapp:focus { 
    color: #FFF !important;
    border-color: #026634 !important; 
    background: #026634 !important;
}

footer > div { padding: calc(2rem + 2vw) 0 }

.default-img{
    background: rgb(255,153,93);
    background: linear-gradient(216deg, rgba(255,153,93,1) 0%, rgba(0,0,0,1) 100%) }