:root {
    --purple-50: #F0EAF9;
    --purple-100: #CFBFEB;
    --purple-200: #B8A0E2;
    --purple-300: #9774D5;
    --purple-400: #8359CD;
    --purple-500: #6430C0;
    --purple-600: #5B2CAF;
    --purple-700: #472288;
    --purple-800: #371A6A;
    --purple-900: #2A1451;

    --green: #DCEABC;

    --grey-50: #E9E9EA;
    --grey-100: #BABBBD;
    --grey-200: #999B9D;
    --grey-300: #6A6D70;
    --grey-400: #4D5154;
    --grey-500: #212529;
    --grey-600: #1E2225;
    --grey-700: #171A1D;
    --grey-800: #121417;
    --grey-900: #0E1011;

    /* sizes */
    --size-12px: 1.2rem;
    --size-14px: 1.4rem;
    --size-16px: 1.6rem;
    --size-18px: 1.8rem;
    --size-24px: 2.4rem;
    --size-28px: 2.6rem;
    --size-32px: 3.2rem;
    --size-40px: 4rem;
    --size-48px: 4.8rem;
    --size-56px: 5.6rem;
    --size-64px: 6.4rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    list-style: none;
    text-decoration: none;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    background-color: #F3F3F3;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    user-select: none;
    max-width: 100%;
}

.main {
    position: relative;
    letter-spacing: -0.4px;
    font-family: "Inter", sans-serif
}

.title {
    line-height: calc(1em * 1.12);
}

p {
    line-height: calc(1em * 1.52);
    font-weight: 400;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.grid {
    display: grid;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.align-top {
    align-items: flex-start;
}

.text-uppercase {
    text-transform: uppercase;
}

.instrumental {
    font-family: "Instrument Serif", serif;
    font-weight: 500 !important;
}

p {
    line-height: calc(1em * 1.5);
}

.content__wrapper {
    padding: 4rem 0rem;
    gap: var(--size-40px);
    display: flex;
    flex-direction: column;
}

.cta__btn {
    font-size: var(--size-16px);
    font-weight: 600;
    color: var(--purple-50);
    background-color: var(--purple-500);
    border-radius: 0.8rem;
    padding: var(--size-12px) var(--size-24px);
    cursor: pointer;
}

.secondary__cta {
    font-size: var(--size-16px);
    cursor: pointer;
    font-weight: 600;
    padding: var(--size-12px) var(--size-24px);
    border-radius: 0.8rem;
    border: 1.2px solid var(--purple-900);
    text-decoration: none;
}

/* Heading Wrappers */
.heading__wrapper {
    gap: .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pill {
    font-size: 1.4rem;
    border: 1px solid var(--grey-200);
    padding: .8rem;
    border-radius: .8rem;
    color: var(--grey-500);
}

.section__heading {
    font-size: var(--size-32px);
    color: var(--grey-500);
    font-weight: 600;
}

.section__description {
    font-size: var(--size-16px);
    color: var(--grey-400);
    max-width: 50ch;
}

/* media queries starts */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

/* Small screens (sm) */
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

/* Medium screens (md) */
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

/* Large screens (lg) */
@media (min-width: 960px) {
    .container {
        max-width: 960px;
    }

    .content__wrapper {
        padding: 6rem 0rem;
        gap: 6rem;
    }

    .cta__btn {
        font-size: var(--size-18px);
    }

    .pill {
        font-size: var(--size-16px);
    }

    .section__heading {
        font-size: var(--size-48px);
    }

    .section__description {
        font-size: var(--size-18px);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

/* Extra large screens (xl) */
@media (min-width: 1248px) {
    .container {
        max-width: 1248px;
    }

    .content__wrapper {
        padding: 8rem 0rem;
        gap: 8rem;
    }
}