/* GLOBALS */
:root {
  --body-text-color: #363636;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FEFAEB; 
}

/* HERO SLIDER */
.home-hero__slider-card {
  flex: 0 0 90%;

  & figure img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

/* FLIPPY BUTTON */

/* base button style */
.btn-flippy {
  display: inline-block;
  padding: 0px 30px;
  height: 40px;
  line-height: 60px;
  overflow: hidden;
  position: relative;
  text-align: center;
  transition: 0.3s;
  cursor: pointer;
  /* option b design */
  border-radius: 100px;
  background-color: var(--primary);
  color: var(--light);
  /* text-transform: uppercase; */
  font-size: var(--text-s);
}

/* label inside the button */
.btn-label-up {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0%;
  transition: 0.3s ease-in;	
}

.btn-flippy:hover .btn-label-up {
  top: -100%;
}

/* variants */
.btn-primary {
  background-color: var(--primary);
  color: var(--light);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--primary);
}

.btn-outline {
  background-color: transparent;
  border: solid 1px var(--primary);
  color: var(--dark);
}

/* SCALE SECTION */

.scale-section {
  transform: scale(0.9);
  transition: transform 0.1s ease-out;
  will-change: transform;
}