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

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

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

/* @media (min-width: 1024px) {} */

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

:root {
    --clr-red: #EF233C;
    --clr-white: #EDF2F4;
    --clr-text: #2B2D42;
    --clr-dark: #0E0D14;

    /* 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: 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%;
}

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

.main {
    background-color: var(--clr-white);
}

.orbitron {
    font-family: "Orbitron", sans-serif;
    line-height: calc(1em *1.08);
}

.inter {
    font-family: "Inter", sans-serif;
    line-height: calc(1em * 1.4);
}

p {
    line-height: calc(1em * 1.4);
    font-weight: 300;
    font-family: 'Inter', sans-serif;
    letter-spacing: -.4px;
    font-weight: 400;
}

.red {
    color: var(--clr-red);
}

.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;
}

.cta__btn {
    padding: 1.2rem 2.4rem;
    background-color: var(--clr-red);
    color: var(--clr-white);
    font-size: var(--size-18px);
    font-weight: 500;
    font-family: "Inter", sans-serif;
    transition: transform 0.24s ease;
    text-transform: capitalize;
    gap: .8rem;
    border: none;
    cursor: pointer;
}

.cta__btn:hover {
    transform: translateY(-1rem);
}

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

.section__subheading {
    font-size: var(--size-12px);
    font-weight: 500;
}

.section__heading {
    font-size: var(--size-28px);
    color: var(--clr-text);
    font-weight: 600;
}

.section__description {
    font-size: var(--size-14px);
    color: var(--clr-text);
}

.content__wrapper {
    padding: 4rem 0rem;
    gap: var(--size-32px)
}

.heading__wrapper {
    gap: .8rem;
}

.socials__icon-container {
    gap: var(--size-24px);
    font-size: 2.4rem;
    list-style: none;
}

.socials__icon-container>a,
.socials__icon-container>a i {
    color: var(--clr-white);
}

.socials__icon-container i:hover {
    color: var(--clr-red);
}

.loading {
    filter: blur(30px) grayscale(45%);
}

.loaded {
    filter: blur(0) grayscale(0);
    transition: 0.7s ease-in-out;
}

/* 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;
    }

    .section__subheading {
        font-size: var(--size-14px);
        font-weight: 500;
    }

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

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

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

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

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

    .cta__btn {
        font-size: 2.2rem;
    }

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

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

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