:root {
    --text-color: #FFF;
    --text-color-dark: #000;

    --gradient-dark: #630342;
    --gradient-dark-end: #D23069E5;
    --gradient-light: #D24478;
    --gradient-light-end: #4CB0D0;
}

* {
    font-family: 'Poppins', sans-serif;
}

.btn {
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 500;
    cursor: pointer;

    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--gradient-light-end);
    color: var(--text-color);
}

.btn:hover {
    transform: scale(1.02);
}

.btn-secondary {
    background-color: var(--text-color);
    color: var(--text-color-dark);
}

.btn-special {
    background-color: var(--gradient-dark);
    color: var(--text-color);
}

.btn-primary--negative {
    border: 1px solid var(--text-color);
    background-color: transparent !important;
}

/**** FONTS ****/
.text-xs { font-size: 12px; }
@media (max-width: 991px) { .text-xs { font-size: 12px; } }
@media (max-width: 767px) { .text-xs { font-size: 12px; } }
@media (max-width: 478px) { .text-xs { font-size: 12px; } }

.text-sm { font-size: 14px; }
@media (max-width: 991px) { .text-sm { font-size: 12px; } }
@media (max-width: 767px) { .text-sm { font-size: 12px; } }
@media (max-width: 478px) { .text-sm { font-size: 12px; } }

.text-base { font-size: 16px; }
@media (max-width: 991px) { .text-base { font-size: 14px; } }
@media (max-width: 767px) { .text-base { font-size: 12px; } }
@media (max-width: 478px) { .text-base { font-size: 12px; } }

.text-lg { font-size: 18px; }
@media (max-width: 991px) { .text-lg { font-size: 16px; } }
@media (max-width: 767px) { .text-lg { font-size: 14px; } }
@media (max-width: 478px) { .text-lg { font-size: 12px; } }

.text-xl { font-size: 20px; }
@media (max-width: 991px) { .text-xl { font-size: 18px; } }
@media (max-width: 767px) { .text-xl { font-size: 16px; } }
@media (max-width: 478px) { .text-xl { font-size: 14px; } }

.text-2xl { font-size: 24px; }
@media (max-width: 991px) { .text-2xl { font-size: 20px; } }
@media (max-width: 767px) { .text-2xl { font-size: 18px; } }
@media (max-width: 478px) { .text-2xl { font-size: 16px; } }

.text-3xl { font-size: 30px; }
@media (max-width: 991px) { .text-3xl { font-size: 24px; } }
@media (max-width: 767px) { .text-3xl { font-size: 20px; } }
@media (max-width: 478px) { .text-3xl { font-size: 18px; } }

.text-4xl { font-size: 36px; }
@media (max-width: 991px) { .text-4xl { font-size: 30px; } }
@media (max-width: 767px) { .text-4xl { font-size: 24px; } }
@media (max-width: 478px) { .text-4xl { font-size: 20px; } }

.text-5xl { font-size: 48px; }
@media (max-width: 991px) { .text-5xl { font-size: 36px; } }
@media (max-width: 767px) { .text-5xl { font-size: 30px; } }
@media (max-width: 478px) { .text-5xl { font-size: 24px; } }

.text-6xl { font-size: 60px; }
@media (max-width: 991px) { .text-6xl { font-size: 48px; } }
@media (max-width: 767px) { .text-6xl { font-size: 36px; } }
@media (max-width: 478px) { .text-6xl { font-size: 30px; } }

.text-7xl { font-size: 72px; }
@media (max-width: 991px) { .text-7xl { font-size: 60px; } }
@media (max-width: 767px) { .text-7xl { font-size: 48px; } }
@media (max-width: 478px) { .text-7xl { font-size: 36px; } }

.text-8xl { font-size: 96px; }
@media (max-width: 991px) { .text-8xl { font-size: 72px; } }
@media (max-width: 767px) { .text-8xl { font-size: 60px; } }
@media (max-width: 478px) { .text-8xl { font-size: 48px; } }

.text-9xl { font-size: 128px; }
@media (max-width: 991px) { .text-9xl { font-size: 96px; } }
@media (max-width: 767px) { .text-9xl { font-size: 72px; } }
@media (max-width: 478px) { .text-9xl { font-size: 60px; } }