/* ----------------------- global ----------------------- */

body {
  margin: 0;
  padding: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

* {
  transition-duration: 0.4s;
  /* transition-timing-function: ease-in-out; */
}

/* ----------------------- global text -----------------------  */
h1,
h2 {
  font-family: "Bebas Neue", cursive;
  font-size: 55px;
}

h3 {
  font-family: "Bebas Neue", cursive;
  font-size: 45px;
  margin: 0;
  text-align: left;
}
h4 {
  font-family: "Bebas Neue", cursive;
  font-size: 1.8rem;
  margin: 0;
  text-align: left;
}
h4 small {
  padding-left: 5px;
}
h5 {
  font-family: "Courgette", cursive;
  font-size: 1rem;
  text-align: left;
}

h6 {
  font-family: "Bebas Neue", cursive;
  font-size: 20px;
  margin: 0;
  /* text-align: left; */
}

p {
  font-family: "Courgette", cursive;
  /* font-size: 0.8; */
  font-size: 1rem;
  text-align: left;
}

a:hover {
  text-decoration: none;
}

/* ----------------------- global padding ----------------------- */

.global-padding {
  padding: 25px 50px;
}
.filters-padding{
  padding: 25px 50px 0 50px;
}
.padding-box {
  padding: 40px 100px;
}

/* ----------------------- text colors ----------------------- */
.txt-light {
  color: #97baa6;
}
.txt-red {
  color: #bc8b7c;
}
.txt-dark-red {
  color: #8d4d44;
}
.txt-dark-dark {
  color: #49494b;
}

.txt-dark {
  color: #49494b;
}

/* ----------------------- box colors ----------------------- */
.box-dark {
  background-color: #49494b !important;
}
.box-main {
  background-color: #bc8b7c !important;
}
.box-light {
  background-color: #97baa6 !important;
}
.box-img-66 {
  min-height: 66vh;
}
.box-img-33 {
  min-height: 33vh;
}

/* ----------------------- buttons ----------------------- */
.jbtn-main {
  background-color: #bc8b7c;
  color: white;
}
.jbtn-main:hover {
  background-color: #8d4d44;
  color: white !important;
  transform: scale(1.05);
}

.jbtn-light {
  background-color: #97baa6;
  color: white;
}
.jbtn-light:hover {
  background-color: #7bad91;
  color: white !important;
  transform: scale(1.05);
}

.bg-blue {
  display: grid;
  min-height: 100vh;
}

.wrapper {
  display: grid;
  background-color: #e7e8e3;
  gap: 15px;
}

@media only screen and (max-width: 576px) {
  /* global padding */
  .global-padding {
    padding: 15px 15px;
  }
  .filters-padding {
    padding: 15px 15px 0 15px;
  }
}