:root { 
    /* --first: #E9EFEC; --second:#16423C; --third: #6A9C89; --fourth: #e84545;
    --first: #D98324; --second:#443627; --third: #EFDCAB; --fourth: #F2F6D0; */
    --first: #F2EFE7; --second:#006A71; --third: #9ACBD0; --fourth: #48A6A7;
}

.btn-first{
    background: var(--first);
    color: var(--second);
}

.btn-first:hover{
    background: var(--second);
    color: var(--first);
}

.btn-second{
    background: var(--second);
    color: var(--first);
}

.btn-second:hover{
    background: var(--third);
    color: var(--first);
}

.btn-third{
    background: var(--third);
    color: var(--first);
}

.btn-third:hover{
    background: var(--first);
    color: var(--third);
}

.btn-fourth{
    background: var(--fourth);
    color: var(--second);
}

.btn-fourth:hover{
    background: var(--second);
    color: var(--fourth);
}

.text-first{
    color: var(--first)!important;
}
.text-second{
    color: var(--second)!important;
}
.text-third{
    color: var(--third)!important;
}
.text-fourth{
    color: var(--fourth)!important;
}

.text-red{
    color: red;
}

.bg-first{
    background: var(--first)!important;
}
.bg-second{
    background: var(--second)!important;
}
.bg-third{
    background: var(--third)!important;
}
.bg-fourth{
    background: var(--fourth)!important;
}

.border-first{
    border-color: var(--first)!important;
}
.border-second{
    border-color: var(--second)!important;
}
.border-third{
    border-color: var(--third)!important;
}
.border-fourth{
    border-color: var(--fourth)!important;
}


.anim {
    opacity: 0;
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
  }
  
  .anim.fade   { transform: scale(1.01); }
  .anim.left   { transform: translateX(-50px); }
  .anim.right  { transform: translateX(50px); }
  .anim.up     { transform: translateY(30px); }
  .anim.flip   { transform: rotateY(90deg); transform-style: preserve-3d; }
  .anim.scale  { transform: scale(0.8); }
  
  .anim.show {
    opacity: 1;
    transform: none;
  }
  
  .delay-1  { transition-delay: 0.1s; }
  .delay-2  { transition-delay: 0.2s; }
  .delay-3  { transition-delay: 0.3s; }
  .delay-4  { transition-delay: 0.4s; }
  .delay-5  { transition-delay: 0.5s; }
  .delay-6  { transition-delay: 0.6s; }
  .delay-7  { transition-delay: 0.7s; }
  .delay-8  { transition-delay: 0.8s; }
  .delay-9  { transition-delay: 0.9s; }
  .delay-10 { transition-delay: 1s; }