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

body { font-family: 'Montserrat', sans-serif; }

/* Global */
a { text-decoration: none; outline: none }
.ls-1 { letter-spacing: 1px; }
.fw-3 { font-weight: 300; }
.fw-4 { font-weight: 400; }
.fw-5 { font-weight: 500; }
.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }
.fs-tiny { font-size: .8rem; }
.fs-small { font-size: .9rem; }
.text-black-3 { color: #383838; }
.text-grey { color: #707070; }
.text-brown,
.text-brown:hover { color: #4C372F; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.swal-footer { text-align: center; }
.swal-button { background-color: #4C372F; }

/* Section Title */
.section-title { display: flex; align-items: center; flex-direction: column; justify-content: center; margin-bottom: 4rem; text-transform: uppercase;text-align: center; color: #4C372F; }
.section-title .title { font-weight: 300; }

/* Pagination */
.pagination .page-item .page-link { font-size: 1rem; color: #4C372F; border: none; }
.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus { color: #FFF; background-color: #4C372F; box-shadow: none; }

/* Button Outline Brown */
.btn-outline-brown { text-transform: uppercase; border-radius: 0; background-color: #FFFFFF; border-color: #4C372F; color: #4C372F; }
.btn-outline-brown:hover, .btn-outline-brown:focus { background-color: #4C372F; border-color: #4C372F; color: #FFF; }

/* Button Brown Light */
.btn-brown-light { color: #625049; background-color: #CFB185; border-color: #CFB185; font-weight: 700; font-size: 1rem; text-transform: uppercase; border-radius: 0.75rem; }
.btn-brown-light:hover { color: #625049; background-color: #BA9F77; border-color: #BA9F77; }
.btn-brown-light:focus { color: #625049; background-color: #B09771; border-color: #B09771; box-shadow: 0 0 0 0.25rem rgb(212 185 145 / 25%); }

/* Header Bar */
.header-bar { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 30px; background-color: #000000; }

/* Navbar */
.navbar { background-color: #FFFFFF; margin-top: 30px; }
.navbar .navbar-brand img { width: 177.48px; }
.navbar .navbar-nav .nav-item .nav-link { display: inline-block; margin: .5rem 0; color: #000000; font-size: 1.1rem; text-transform: uppercase; }
.navbar .navbar-nav .nav-item .nav-link::after { content: ''; display: block; margin: 0 auto; width: 0; height: 2px; background: #000000; transition: width .3s; }
.navbar .navbar-nav .nav-item .nav-link:hover::after,
.navbar .navbar-nav .nav-item .nav-link.active::after { width: 80%; }

@media(min-width: 576px) {
  .navbar .navbar-nav { max-width: 540px; margin: 0 auto; }
}

@media(min-width: 768px) {
  .navbar .navbar-nav { max-width: 720px; }
}

@media(min-width: 992px) {
  .navbar .navbar-nav { margin: initial; max-width: initial; align-items: center; }
  .navbar .navbar-nav .nav-item .nav-link { margin: 0 .5rem; }
  .navbar .navbar-nav .nav-item:nth-child(6) .nav-link { margin-right: 0; }
}

@media(min-width: 1200px) {
  .navbar .navbar-nav .nav-item .nav-link { margin: 0 1rem; }
}

/* Footer */
.footer { background-color: #FFFFFF; }
.footer p { font-weight: 300; color: #4C372F; font-size: 0.875rem; }
.footer p a { font-weight: 700; color: #4C372F; text-transform: uppercase; }

/* Effect Shake Hover */
.shake:hover { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); perspective: 1000px; }

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}