html {
  scroll-behavior: smooth;
}

* {
    background-color: #fffaf0;
    background-image: url("../src/Assets/Bg.png");
}

.btn-outline-navy {
  border-color: #000000 !important;
}
.btn-outline-navy:hover {
  color: white !important;
  background-color: #000000 !important;
}

.nav-zoom {
  transition: transform 0.4s ease-in-out !important;
}
.nav-zoom:hover {
  transform: scale(1.15);
}

.zoom {
  transition: transform 0.4s ease-in-out !important;
}
.zoom:hover {
  transform: scale(1.05);
}

.hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
  transform: scale(1.05);
  transition: 0.2s ease-in-out !important;
}

:root {
  --avatar-min: 100px;
  --avatar-preferred: 70vw;
  --avatar-max: 300px;

  --card-min: 240px;
  --card-preferred: 80vw;
  --card-max: 450px;

  --card-height-ratio: 0.88;
}

.custom-circle {
  width: clamp(var(--avatar-min), var(--avatar-preferred), var(--avatar-max)) !important;
  height: clamp(var(--avatar-min), var(--avatar-preferred), var(--avatar-max)) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}

.custom-circle:hover {
    border-color: #3c3c3c !important;
}

.rotator-wrapper {
  width: clamp(var(--card-min), var(--card-preferred), var(--card-max));
  height: calc(
    clamp(var(--card-min), var(--card-preferred), var(--card-max)) *
    var(--card-height-ratio)
  );
}

.rotator-card {
  width: 100%;
  height: 100%;
  will-change: transform;
}