/*  
[BRAND GUIDELINES]

----------- BRAND INFO -----------

Brand Name: Quill
Brand Logo: SVG/quill-logo.svg
Brand SVG Icons: SVG/facebook-logo.svg, SVG/instagram-logo.svg, SVG/linkedin-logo.svg, SVG/tiktok-logo.svg, SVG/youtube-logo.svg

----------- GLOSSARY -----------

IMPORTANT TERMS
s = small
a = anchor
p = paragraph
h1 = heading 1
h2 = heading 2
h3 = heading 3
h4 = heading 4
h5 = heading 5

----------- TYPOGRAPHY -----------

FONT SIZES
1.2rem(s) / 1.6rem(a) / 2rem(p) / 2.4rem(h5) / 3.2rem(h4) / 4rem(h3) / 4.8rem(h2) / 6.2rem(h1)
12px(s) / 16px(a) / 20px(p) / 24px(h5) / 32px(h4) / 40px(h3) / 48px(h2) / 62px(h1)

FONT WEIGHTS
400(s/a/p) / 700(h5/h4/h3/h2/h1)

LINE HEIGHTS
1.5(p/a/s) / 1.2(h1/h2/h3/h4/h5)

LETTER SPACING
Default or 0(p/a/s) / -2px(h1/h2/h3/h4/h5)

FONT FAMILY
Poppins (Google Font) - sans-serif [For all text]

----------- COLORS -----------

PRIMARY COLORS (#BLUE)
Base Color: #339af0 (Sky Blue)
Tint Color: #d0ebff (Arctic Blue)
Shade Color: #1c7ed6 (Deep Sea Blue)

SECONDARY COLORS (#VIOLET)
Base Color: #9775fa (Lavender Violet)
Tint Color: #e5dbff (Moonlight Violet)
Shade Color: #7048e8 (Valvetnight Violet)

TERTIARY COLORS (#ORANGE)
Base Color: #ff922b (Pumpkin Orange)
Tint Color: #ffe8cc (Dawn Orange)
Shade Color: #f76707 (Lava Orange)

Grey COLORS (#Grey)
Base Color: #495057 (Slate Grey)
Tint Color: #f1f3f5 (Pebble Grey)
Shade Color: #212529 (Graphite Grey)
White Color: #ffffff (Pure White)
Black Color: #000000 (Deep Black)

----------- BORDER RADIUS -----------

Border Radius: 13px / Highlight Border Radius: 4px / CTA-Card Border Radius: 20px

----------- SPACING SYSTEM -----------

5px / 10px / 15px / 20px / 25px / 30px / 40px / 50px / 60px / 70px / 80px / 90px / 125px / 150px / 200px / 250px / 300px / 400px / 500px


------------------------------------------------------------------------------------------------------------------------------------------

*/

/* Variables */

:root {
    /* Font sizes */
    --font-size-s: 1.2rem; /* 12px */
    --font-size-a: 1.6rem; /* 16px */
    --font-size-p: 2rem; /* 20px */
    --font-size-h5: 2.4rem; /* 24px */
    --font-size-h4: 3.2rem; /* 32px */
    --font-size-h3: 4rem; /* 40px */
    --font-size-h2: 4.8rem; /* 48px */
    --font-size-h1: 6.2rem; /* 62px */

    /* Font weights */
    --font-weight-normal: 400; /* Regular */
    --font-weight-bold: 700; /* Bold */

    /* line height */
    --line-height-normal: 1.5; /* Normal */
    --line-height-tight: 1.2; /* Heading */

    /* Letter Spacing */
    --letter-spacing-normal: 0; /* Normal */
    --letter-spacing-tight: -2px; /* Heading */

    /* font family */
    --font-family-main: 'Poppins', sans-serif;

    /* color */
    --color-primary-base: #339af0; /* Sky Blue */
    --color-primary-tint: #d0ebff; /* Arctic Blue */
    --color-primary-shade: #1c7ed6; /* Deep Sea Blue */
    --color-secondary-base: #9775fa; /* Lavender Violet */
    --color-secondary-tint: #e5dbff; /* Moonlight Violet */
    --color-secondary-shade: #7048e8; /* Velvetnight Violet */
    --color-tertiary-base: #ff922b; /* Pumpkin Orange */
    --color-tertiary-tint: #ffe8cc; /* Dawn Orange */
    --color-tertiary-shade: #f76707; /* Lava Orange */
    --color-grey-base: #495057; /* Slate Grey */
    --color-grey-tint: #f1f3f5; /* Pebble Grey */
    --color-grey-shade: #212529; /* Graphite Grey */
    --color-white: #ffffff; /* Pure White */
    --color-black: #000000; /* Deep Black */

    /* Miscellaneous */
    --nav-height: rem; /* Height of the navbar */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::selection {
    color: rgb(128, 26, 26);
}

body {
    /* 
    Most Common Styles are used for inherited elements
    Theses are the default styles for body text
    */
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-grey-base);
    /*
    Grey Base Color
    */
}

html {
    font-size: 62.5%; /* 1rem = 10px */
}

.container {
    margin: 0 auto;
    width: 100vw;
}
.temporary-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 85%;
}

h1, h2, h3, h4, h5 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-grey-shade);
    /* 
    Grey Shade Color
    */
}

h1 {
    font-size: var(--font-size-h1); /* 62px */
}

h2 {
    font-size: var(--font-size-h2); /* 48px */
}

h3 {
    font-size: var(--font-size-h3); /* 40px */
}

h4 {
    font-size: var(--font-size-h4); /* 32px */
}

h5 {
    font-size: var(--font-size-h5); /* 24px */
}

p {
    font-size: var(--font-size-p); /* 20px */
}

a {
    text-decoration: none;
    font-size: var(--font-size-a); /* 16px */
    display: inline-block;
}

ul {
    list-style: none;
}

span {
    display: inline-block;
}

.small-text {
    font-size: var(--font-size-s); /* 12px */
}

/* ---------- COMPONENT STYLES ---------- */

.btn {
    font-weight: var(--font-weight-normal);
    text-decoration: none;
    font-size: var(--font-size-a); /* 16px */
    line-height: var(--line-height-normal);
    padding: 1.5rem 3rem; /* 15px 30px */
    border-radius: 13px;
}

.btn-primary:link, .btn-primary:visited {
    color: var(--color-white);
    background-color: var(--color-primary-base);
    /* 
    Blue Base Color
    */
    border: 2px solid var(--color-primary-base);
}

.btn-primary:hover, .btn-primary:active {
    color: var(--color-white);
    background-color: var(--color-primary-shade);
    /* 
    Blue Shade Color
    */
    border: 2px solid var(--color-primary-shade);
}

.btn-primary-outline:link, .btn-primary-outline:visited {
    color: var(--color-primary-base);
    background-color: var(--color-white);
    border: 2px solid var(--color-primary-base);
}

.btn-primary-outline-active, .btn-primary-outline:hover {
    color: var(--color-primary-base);
    background-color: var(--color-white);
    border: 2px solid var(--color-primary-shade);
}

.btn-secondary:link, .btn-secondary:visited {
    color: var(--color-white);
    background-color: var(--color-secondary-base);
    /* 
    Violet Base Color
    */
    border: 2px solid var(--color-secondary-base);
}

.btn-secondary:hover, .btn-secondary:active {
    color: var(--color-white);
    background-color: var(--color-secondary-shade);
    /* 
    Violet Shade Color
    */
    border: 2px solid var(--color-secondary-shade);
}

.highlight {
    color: var(--color-white);
    padding: 0.5rem 1rem; /* 5px 10px */
    border-radius: 4px;
}

.highlight-primary {
    background-color: var(--color-primary-base);
    /* 
    Blue Base Color
    */
}
.highlight-secondary {
    background-color: var(--color-secondary-base);
    /* 
    Violet Base Color
    */
}

.highlight-tertiary {
    background-color: var(--color-tertiary-base);
    /* 
    Orange Base Color
    */
}

.logo-md {
    width: 130px;
}

.logo-sm {
    width: 80px;
}

/* ---------------- SECTION STYLES ---------------- */

/* NAVBAR SECTION */

.navbar {
    border-top: rgb(0, 0, 0) 3px;
    border-bottom: rgb(0, 0, 0);
    border-right: 0px;
    border-left: 0px;
    border-style: dashed;
    height: var(--nav-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem; /* 5px */
    background-color: lightcyan;
    padding-top: 0.6rem; /* 5px */
    padding-bottom: 0.6rem; /* 5px */
}

.navbar-btn-container {
    display: flex;
    gap: 2rem; /* 20px */

}

/* ----- HERO SECTION ----- */

.hero-section {
    height: calc(100vh - var(--nav-height)); /* Full viewport height minus navbar height */
    min-height: 43rem; /* Minimum height for smaller screens */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    padding-bottom: 2rem; /* 20px */
    width: 100vw;
}

.hero-section-main-heading {
    background-size: 200%;
    max-width: 800px;
    margin-bottom: 1rem; /* 10px */
    margin-top: 20rem; /* 100px */
    text-align: center;
}

.hero-section-main-paragraph {
    max-width: 600px;
    margin-bottom: 5rem; /* 50px */
}

.hero-section-btn-container {
    display: flex;
    gap: 2rem; /* 20px */
}

/* ----- FEATURES SECTION ----- */

.features-section {
    margin-bottom: 30rem; /* 300px */
    margin-top: 28rem; /* 280px */
}

.features-section-main-heading {
    text-align: center;
    margin-bottom: 8rem; /* 80px */
}

.features-section-heading {
    background: linear-gradient(to right, #fc72ff, #8f68ff, #487bff, #8f68ff, #fc72ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 2.5s linear infinite;
    margin-bottom: 1rem; /* 10px */
    background-size: 200% auto; /* Add this line */
     background-position: 0 0; /* Add this line */
}

@keyframes animate-gradient {
    to {
        background-position: 200%;
    }
}

.features-section-img {
    max-width: 400px;
    width: 100%;
}

/* ----- CTA SECTION ----- */

.cta-section {
    margin-bottom: 30rem; /* 300px */
    display: flex;
    justify-content: center;
}

.cta-card {
    background-color: var(--color-primary-base);
    max-width: 1000px; /* already margin 100% so no need to apply width */
    width: 100%; /* in order to set the max-width for the cta-section flex container rather than the content width */
    padding: 10rem 20rem; /* 100px 200px */
    border-radius: 20px;
    text-align: center;
}

.cta-section-main-heading {
    margin-bottom: 3rem; /* 30px */
}

/* ----- FOOTER SECTION ----- */

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* 10px */
}

.social-media-icons {
    width: 20px;
}

.social-media-icons-container {
    display: flex;
    gap: 2rem; /* 20px */
}

.footer-links {
    display: flex;
    gap: 2rem; /* 20px */
}

/* ------- This is the animated background thing ------- */
.header {
    position: relative;
    z-index: 1;
}