@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400..600&family=Quicksand:wght@700&display=swap');

:root {
    --pink-primary: #F05382;
    --pink-accent-01: #E1386A;
    --pink-accent-02: #FF7AA1;
    --pink-accent-03: #FBA9C1;
    --pink-accent-04: #FFEFF4;
    --pink-accent-05: #FDFBFB;
    --black: #1E1B1C;
    --gray-01: #575757;
    --gray-02: #B0B0B0;
    --gray-03: #EFEFEF;
    --error-01: #E50E0E;
    --error-02: #FFEBEB;
    --info-01: #008CD7;
    --info-02: #EBF8FF;
    --warning-01: #E5A40E;
    --warning-02: #FFF9EB;
    --warning-03: #836a2f;
    --success-01: #07B42A;
    --success-02: #EBFFEF;

    --font-quicksand: 'Quicksand', sans-serif;
    --font-plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;
}

a {
    cursor: pointer;
    text-decoration: underline;
}

/* Font variants */
body {
    font-family: var(--font-plus-jakarta-sans) !important;
    letter-spacing: 0 !important;
}

.fw-semi-bold {
    font-weight: 600;
}

.hero-text-bold {
    font-family: var(--font-quicksand) !important;
    font-weight: 700 !important;
}

.hero-text-bold.text-small {
    font-size: 20px !important;
    line-height: 28px !important;
}

.hero-text-bold.text-normal {
    font-size: 32px !important;
    line-height: 40px !important;
}

.hero-text-bold.text-large {
    font-size: 64px !important;
    line-height: 72px !important;
}

.text-extra-small {
    font-size: 12px !important;
    line-height: 20px !important;
}

.text-small {
    font-size: 14px !important;
    line-height: 22px !important;
}

.text-normal {
    font-size: 16px !important;
    line-height: 24px !important;
}

.text-medium {
    font-size: 18px !important;
    line-height: 26px !important;
}

.text-large {
    font-size: 20px !important;
    line-height: 28px !important;
}

.text-heading-1 {
    font-size: 48px !important;
    line-height: 56px !important;
}

.text-heading-2 {
    font-size: 36px !important;
    line-height: 44px !important;
}

.text-heading-3 {
    font-size: 32px !important;
    line-height: 40px !important;
}

.text-heading-4 {
    font-size: 24px !important;
    line-height: 32px !important;
}

/* Text colors */
.text-pink-primary {
    color: var(--pink-primary) !important;
}

.text-pink-accent-02 {
    color: var(--pink-accent-02) !important;
}

.text-pink-accent-03 {
    color: var(--pink-accent-03) !important;
}

.text-black {
    color: var(--black) !important;
}

.text-gray-01 {
    color: var(--gray-01) !important;
}

.text-gray-02 {
    color: var(--gray-02) !important;
}

.text-gray-03 {
    color: var(--gray-03) !important;
}

.text-error-01 {
    color: var(--error-01) !important;
}

.text-info-01 {
    color: var(--info-01) !important;
}

.text-warning-01 {
    color: var(--warning-01) !important;
}

.text-warning-03 {
    color: var(--warning-03) !important;
}

.text-success-01 {
    color: var(--success-01) !important;
}

/* Backgrounds */
.bg-pink-primary {
    background-color: var(--pink-primary) !important;
}

.bg-pink-accent-05 {
    background-color: var(--pink-accent-05) !important;
}

.bg-error-02 {
    background-color: var(--error-02) !important;
}

.bg-info-02 {
    background-color: var(--info-02) !important;
}

.bg-warning-02 {
    background-color: var(--warning-02) !important;
}

.bg-success-02 {
    background-color: var(--success-02) !important;
}

/* Sizing styles */

.size-18px {
    width: 18px;
    height: 18px;
}

.size-20px {
    width: 20px;
    height: 20px;
}

.size-24px {
    width: 24px !important;
    height: 24px !important;
}

.size-32px {
    width: 32px;
    height: 32px;
}

.size-40px {
    width: 40px;
    height: 40px;
}

.size-48px {
    width: 48px !important;
    height: 48px !important;
}

.max-w-488px {
    max-width: 488px;
}

/* Spacing styles */
.p-30px {
    padding: 30px;
}

.p-40px {
    padding: 40px;
}

.pt-34px {
    padding-top: 34px;
}

.pt-40px {
    padding-top: 40px;
}

.pt-56px {
    padding-top: 56px;
}

.pt-60px {
    padding-top: 60px;
}

.pb-40px {
    padding-bottom: 40px;
}

.pb-60px {
    padding-bottom: 60px;
}

.pb-64px {
    padding-bottom: 64px;
}

.pb-86px {
    padding-bottom: 86px;
}

.pb-120px {
    padding-bottom: 120px;
}

.px-30px {
    padding-left: 30px;
    padding-right: 30px;
}

.px-32px {
    padding-left: 32px;
    padding-right: 32px;
}

.px-150px {
    padding-left: 150px !important;
    padding-right: 150px !important;
}

.px-12px {
    padding-left: 12px;
    padding-right: 12px;
}

.py-12px {
    padding-top: 12px;
    padding-bottom: 12px;
}

.py-20px {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-32px {
    padding-top: 32px;
    padding-bottom: 32px;
}

.py-80px {
    padding-top: 80px;
    padding-bottom: 80px;
}

.mt-12px {
    margin-top: 12px;
}

.mt-40px {
    margin-top: 40px;
}

.gap-12px {
    gap: 12px;
}

.gap-14px {
    gap: 14px;
}

.gap-20px {
    gap: 20px;
}

.gap-24px {
    gap: 24px;
}

.gap-30px {
    gap: 30px;
}

.gap-32px {
    gap: 32px;
}

.gap-40px {
    gap: 40px;
}

.gap-48px {
    gap: 48px;
}

.gap-60px {
    gap: 60px;
}

.gap-80px {
    gap: 80px;
}

/* Shadows and blurs */
.shadow-gray {
    box-shadow: 0 4px 10px 0 rgba(203, 203, 203, 0.25);
}

/* Borders */
.border-gray-03 {
    border-style: solid;
    border-width: 1.5px;
    border-color: var(--gray-03);
}

.border-pink-primary {
    border-style: solid;
    border-width: 1.5px;
    border-color: var(--pink-primary);
}

.rounded-10px {
    border-radius: 10px;
}

.rounded-12px {
    border-radius: 12px;
}

/* Grid templates */
.grid-layout {
    display: grid;
    grid-template-columns: 30% auto;
    gap: 12px 20px;
}

@media (min-width: 992px) {
    .grid-layout {
        grid-template-columns: 1fr 4fr;
        gap: 16px 60px;
    }
}

/* Aspect Ratio */
.aspect-ratio-99x125 {
    aspect-ratio: 99 / 125;
}

.aspect-ratio-61x35 {
    aspect-ratio: 61 / 35;
}