/* Utility classes */
.container-fluid {
  max-width: 95%;
}

.bg-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Buttons */
.button1, .button2 {
  font-family: var(--font-sf-pro);
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  letter-spacing: 0.133px;
  padding: 3px 2px;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-speed) ease;
}

.button1 svg, .button2 svg {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-speed) ease;
}

.button1 svg {
  fill: var(--color-black);
}

.button2 svg {
  fill: var(--color-white);
}

.button1 {
  color: var(--color-black);
}

.button1:hover {
  color: var(--color-black);
}

.button2 {
  color: var(--color-white);
  margin-top: 15px;
  text-transform: uppercase;
}

.button2:hover {
  color: var(--color-white);
}

/* Button animations */
.button1::before, .button2::before {
  background: currentColor;
  content: "";
  height: 1px;
  left: auto;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  transition: width var(--transition-speed) ease, left var(--transition-speed) ease;
}

.button1::before {
  background: var(--color-black) !important;
}

.button2::before {
  background: var(--color-white) !important;
}

.button1:hover::before, 
.button2:hover::before {
  animation-duration: .6s;
  animation-name: button_underline;
}

.button1:hover svg,
.button2:hover svg {
  transform: translateX(3px);
}

.button1::after, .button2::after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: width var(--transition-speed) ease 0s, left var(--transition-speed) ease 0s;
  width: 0;
}

.button1::after {
  background: var(--color-black);
}

.button2::after {
  background: var(--color-white);
}

.button1:hover::after, 
.button2:hover::after { 
  width: 100%; 
  left: 0; 
}

@keyframes button_underline {
  0% {
    left: auto;
    right: 0;
    width: 100%;
  }
  49% {
    left: auto;
    right: 0;
    width: 0;
  }
  50% {
    left: 0;
    right: auto;
    width: 0;
  }
  100% {
    left: 0;
    right: auto;
    width: 100%;
  }
}

/* Mobile styles */
@media (max-width: 991.98px) {
  .button1, .button2 {
    font-size: 10px;
    gap: 3px;
    padding: 5px 4px;
  }
  
  .button1 svg, .button2 svg {
    width: 10px;
    height: 10px;
  }
  
  .button1 {
    margin-top: 15px;
    text-transform: uppercase;
  }
  
  .button2 {
    margin-top: 10px;
  }
}