:root {
  --circle-color: #facbcb;
  --circle-dark-color: #2fff8a2b;
  /* --preloader-leaf-color: #43efdb; */
  --preloader-leaf-color: #39e285;
}

.circle-decor {
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--circle-color);
  border-radius: 50%;
  opacity: 0.2;
  z-index: -1;
}

html[data-bs-theme="dark"] .circle-decor {
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--circle-dark-color) !important;
  border-radius: 50%;
  opacity: 0.2;
  z-index: 0;
}

[v-cloak] { display: none; }

.btn-salmon {
  background-color: #FFA486;
  border-color: #FFA486;
  color: white;
}

.btn-salmon:hover,
.btn-salmon:active,
.btn-salmon:focus {
  background-color: #ef997c !important;
  border-color: #ef997c !important;
  color: white !important;
}

.btn-salmon > i {
  color: white;
}

.btn-dark-success {
  background-color: #37a86a;
  border-color: #37a86a;
  color: white;
}

.btn-dark-success:hover,
.btn-dark-success:active,
.btn-dark-success:focus {
  background-color: #359e64 !important;
  border-color: #359e64 !important;
  color: white !important;
}
.btn-dark-success {
  background-color: #37a86a;
  border-color: #37a86a;
  color: white;
}

.btn-dark-success:hover,
.btn-dark-success:active,
.btn-dark-success:focus {
  background-color: #359e64 !important;
  border-color: #359e64 !important;
  color: white !important;
}

.btn-dark-success > i {
  color: white;
}

a, i {
  cursor: pointer;
}

.background-container:hover .bg-image {
  transform: scale(1.1);
}

/* PRELOADER */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.leafs {
  width: 60px;
  height: 60px;
  position: relative;
  transform-origin: center;
  animation: spin 3s infinite linear;
}

.leaf {
  width: 100%;
  height: 100%;
  position: absolute;
  
  &::before {
    display: block;
    width: 48%;
    height: 48%;
    border-radius: 0 40% 0 40%;
    background-color: var(--preloader-leaf-color) !important;
    content: '';
  }
}

@keyframes spin1 {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(0deg); }
  70% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin2 {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(270deg); }
  70% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin3 {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(180deg); }
  70% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin4 {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(90deg); }
  70% { transform: rotate(90deg); }
  100% { transform: rotate(360deg); }
}

.leaf--1 {
  animation: spin1 3s infinite cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

.leaf--2 {
  animation: spin2 3s infinite cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

.leaf--3 {
  animation: spin3 3s infinite cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

.leaf--4 {
  animation: spin4 3s infinite cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.social-icons a img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 6px;
}

.social-icons a:hover img {
  transform: scale(1.15);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}


@keyframes float {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) scale(1.02) rotate(1deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}


.decor {
  position: fixed;
  background-image: url('/assets/media/background/decoration/leaf-midori.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 150px;
  height: 150px;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.decor2 {
  position: absolute;
  background-image: url('/assets/media/background/decoration/clover-svgrepo-com-2.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.decor3 {
  position: fixed;
  background-image: url('/assets/media/background/decoration/clover-svgrepo-com-2.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 150px;
  height: 150px;
  opacity: 0.2;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.decor-1 {
  top: 0;
  right: 0;
  transform: rotate(15deg) translate(20px, -20px);
  animation: float 6s ease-in-out infinite;
}

.decor-2 {
  bottom: 0;
  left: 0;
  transform: rotate(-20deg) translate(-30px, 30px);
  animation: float 7s ease-in-out infinite;
}

.decor-3 {
  top: 50%;
  left: -40px;
  transform: rotate(45deg);
  animation: float 5.5s ease-in-out infinite;
}

.decor-4 {
  bottom: 20%;
  right: -30px;
  transform: rotate(90deg);
  animation: float 8s ease-in-out infinite;
}

.decor-5 {
  top: 10%;
  left: 40%;
  transform: rotate(-45deg);
  animation: float 6.5s ease-in-out infinite;
}

.decor-6 {
  top: 20%;
  left: 10%;
  transform: rotate(30deg);
  animation: float 7.5s ease-in-out infinite;
}

.decor-7 {
  bottom: 15%;
  right: 15%;
  transform: rotate(-60deg);
  animation: float 6.8s ease-in-out infinite;
}

.decor-8 {
  top: 35%;
  right: 25%;
  transform: rotate(75deg);
  animation: float 7.2s ease-in-out infinite;
}

.decor-9 {
  bottom: 35%;
  left: 20%;
  transform: rotate(120deg);
  animation: float 5.7s ease-in-out infinite;
}

.decor-10 {
  top: 60%;
  left: 5%;
  transform: rotate(-30deg);
  animation: float 6.2s ease-in-out infinite;
}

.decor-11 {
  bottom: 60%;
  right: 5%;
  transform: rotate(15deg);
  animation: float 5.9s ease-in-out infinite;
}

.decor-12 {
  top: 10%;
  right: 20%;
  transform: rotate(-80deg);
  animation: float 7.1s ease-in-out infinite;
}

.decor-13 {
  bottom: 10%;
  left: 30%;
  transform: rotate(40deg);
  animation: float 6.4s ease-in-out infinite;
}

.decor-14 {
  top: 75%;
  right: 40%;
  transform: rotate(100deg);
  animation: float 7.3s ease-in-out infinite;
}

.decor-15 {
  bottom: 45%;
  left: 50%;
  transform: rotate(-100deg);
  animation: float 5.6s ease-in-out infinite;
}

.menu-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.menu-title {
  position: relative;
  display: inline-block;
}

.menu-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.menu-link:hover .menu-title::after {
  width: 40%;
}

.app-header-menu {
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.app-header-menu.drawer-on {
  position: fixed !important;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50% !important;
  height: 280px !important;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-in-out !important;
  box-shadow: var(--bs-drawer-box-shadow);
  display: flex;
  background-color: white !important;
  z-index: 1050;
  border-radius: 8px !important;
}

.headline-title {
  font-size: calc(2rem + 0.6vw) !important
}