@font-face {
    font-family: 'South';
    src: url('https://static.tildacdn.com/tild3063-6536-4464-b736-626166373162/South.woff') format('woff');
    font-weight: 400;
    font-style: normal
}

html {
    font-family: 'Open Sans', Arial, sans-serif;;
    font-size: 16px;
}

.font-south {
    font-family: South, Arial, sans-serif;
}

.btn {
    /* @apply uppercase px-20 py-10 font-bold bg-[#ff8b66] text-white hover:bg-[#f57a51] duration-300; */
    text-transform: uppercase;
    padding: 10px 20px;
    font-weight: 700;
    background-color: #ff8b66;
    color: #fff;
    transition: .3s;
}

.btn:disabled {
    opacity: .7;
    background-color: #ccc !important;
    color: #fff !important;
    cursor: not-allowed;
}

.btn:hover {
    background-color: #f57a51;
}

.btn-white {
    /* @apply bg-white hover:bg-[#f57a51] hover:text-white outline outline-1 outline-white; */
    background-color: #fff;
    color: #ff8b66; /* fbe3dc */
    outline: 1px solid #fff;
}

.btn-white:hover {
    background-color: #f57a51;
    color: #fff;
}

.top-menu-link {
    /* @apply relative px-10 py-5 mx-10 text-16 text-gray-600 hover:text-[#ff8b66] duration-300 xl:text-20; */
    position: relative;
    padding: 5px 10px;
    font-size: 16px;
    color: #4b5563;
    transition: .3s;
}

.top-menu-link:hover {
    color: #ff8b66;
}

.top-menu-link::before {
    /* @apply before:absolute before:w-full before:h-1 before:top-full before:left-0 before:origin-center before:bg-[#ff8b66] before:duration-300 before:scale-x-0 hover:before:scale-x-100 !important; */
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    transform-origin: center;
    background-color: #ff8b66;
    transform: scaleX(0);
    transition: .3s;
}

.top-menu-link:hover::before {
    transform: scaleX(1);
}

.side-menu-link {
    /* @apply relative inline-block py-5 mx-10 mb-10 text-20 text-gray-600 hover:text-[#ff8b66] duration-300; */
    position: relative;
    display: inline-block;
    padding: 5px 0;
    margin: 0 10px 10px 10px;
    font-size: 20px;
    color: #4b5563;
    transition: .3s;
}

.side-menu-link:hover {
    color: #ff8b66;
}

.side-menu-link::before {
    /* @apply before:absolute before:w-full before:h-1 before:top-full before:left-0 before:origin-center before:bg-[#ff8b66] before:duration-300 before:scale-x-0 hover:before:scale-x-100 !important; */
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    transform-origin: center;
    background-color: #ff8b66;
    transform: scaleX(0);
    transition: .3s;
}

.side-menu-link:hover::before {
    transform: scaleX(1);
}

.bottom-menu-link {
    /* @apply relative px-10 py-5 mx-10 text-18 text-white hover:text-[#ff8b66] duration-300; */
    position: relative;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 18px;
    color: #fff;
    transition: .3s;
}

.bottom-menu-link:hover {
    color: #ff8b66;
}

.bottom-menu-link::before {
    /* @apply before:absolute before:w-full before:h-1 before:top-full before:left-0 before:origin-center before:bg-[#ff8b66] before:duration-300 before:scale-x-0 hover:before:scale-x-100 !important; */
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    transform-origin: center;
    background-color: #ff8b66;
    transform: scaleX(0);
    transition: .3s;
}

.bottom-menu-link:hover::before {
    transform: scaleX(1);
}

.pulse::after,
.pulse::before {
  content: '';
  position: absolute;
  border: 2px solid #ff8b66;
  /* border: 2px solid currentColor; */
  left: -20px;
  opacity: 0;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: pulse 4s linear infinite;
}

.pulse::after {
  animation-delay: 1.25s;
}

@keyframes pulse {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

/* Text */

.text h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 15px 0;
}

.text p {
    margin-bottom: 10px;
}

.text ul,
.text ol {
    padding-left: 40px;
}

.text ul li {
    list-style: disc;
}

.text ol li {
    list-style: decimal;
}

/* Media */

@media (min-width: 1280px) {
    .top-menu-link {
        font-size: 20px;
    }
}