@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sacramento&display=swap");

/* 
 =========================================================================================================================
  Main Setting 
 =========================================================================================================================
*/

:root {
  --header-height: 60px;
  --header-transition-time: 1s;
  --brand-icon-height: 30px;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Rubik", Helvetica, Arial, Lucida, sans-serif;
}

/* 
 =========================================================================================================================
  Button
 =========================================================================================================================
*/

.btn {
  background-color: var(--theme-primary-color);
  font-weight: bold;
  color: #fff;
  border-radius: 2rem;
  transition: all 0.3s;
}

.btn:hover {
  opacity: 0.8;
  background-color: var(--theme-primary-alt-color);
  color: #fff;
}

/* 
 =========================================================================================================================
  Others
 =========================================================================================================================
*/

.rotate-180 {
  transform: rotate(180deg);
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    background-color: var(--theme-primary-color);
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--theme-primary-color);
}