/* Global Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    outline: none;
}

input[type="text"],
input[type="phone"],
input[type="password"],
select,
button {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: "Iranyekan", monospace;
    color: var(--cool-gray);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: var(--off-gray);
}

:root {
    /* Primary Gray Colors */
    --light-gray: #eeeeef;
    --off-white: #fdfdfd;
    --almost-white: #eeefef;
    --very-light-gray: #f9fafb;
    --soft-gray: #4b4b50;
    --cool-gray: #49494e;
    --dark-gray: #23232b;
    --steel-gray: #5b5b60;
    --charcoal-gray: #2d2d32;
    --mid-gray: #a7a7a7;
    --neutral-gray: #d0d0d0;
    --gray-light: #d0d0d0;

    /* Primary Orange Colors */
    --orange-soft: #fc7a4e;
    --sunset-orange: #f17121;
    --soft-orange: #ffd9c2;
    --very-light-orange: #fff5f2;

    /* Primary Black Colors */
    --deep-black: #0a0a0b;
    --midnight-black: #16161a;

    /* Purple Tones */
    --soft-purple: #9e8bf2;
    --lavender-blue: #a486f9;
    --very-light-purple: #efe9ff;

    /* Whites */
    --white-main: #ffffff;

    /* Font Sizes */
    --font-xxs: 0.625rem; /* 10px */
    --font-xs: 0.75rem; /*  12px */
    --font-base: 1rem; /* 16px */
    --font-small: 0.875rem; /* 14px */
    --font-large: 1.125rem; /* 18px */
    --font-xl: 1.5rem; /* 24px */
    --font-2xl: 2rem; /* 32px */

    /* Spacing */
    --spacing-xxs: 0.25rem; /* 4px */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 0.75rem; /* 12px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    html {
        font-size: 13px;
    }

    body {
        font-size: 0.8125rem; /* 13px */
    }

    :root {
        --font-base: 0.8125rem; /* 13px */
        --font-xl: 1rem; /* 16px */
        --font-2xl: 1.125rem; /* 18px */
        --spacing-xl: 0.75rem; /* 12px */
        --spacing-2xl: 1.5rem; /* 24px */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: calc(1.3rem + 1vw);
    }

    .container {
        padding: 0 var(--spacing-xs);
    }

    .section-title {
        font-size: var(--font-large);
    }

    .image-container img {
        height: auto;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    html {
        font-size: 14px;
    }

    body {
        font-size: 0.875rem; /* 14px */
    }

    :root {
        --font-base: 0.875rem; /* 14px */
        --font-xl: 1rem; /* 16px */
        --font-2xl: 1.25rem; /* 20px */
        --spacing-xl: 1rem; /* 16px */
        --spacing-2xl: 2rem; /* 32px */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: calc(1.5rem + 1vw);
    }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .image-container img {
        width: 100%;
    }

    .section-title {
        font-size: var(--font-xl);
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: 15px;
    }

    body {
        font-size: 0.9375rem; /* 15px */
    }

    :root {
        --font-base: 0.9375rem; /* 15px */
        --font-xl: 1.125rem; /* 18px */
        --font-2xl: 1.5rem; /* 24px */
        --spacing-xl: 1.25rem; /* 20px */
        --spacing-2xl: 2.5rem; /* 40px */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: calc(1.2rem + 1vw);
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    .image-container img {
        max-width: 100%;
        height: auto;
    }

    .section-title {
        font-size: var(--font-xl);
    }
}