/* ==========================================================
   HRTECHIFY DESIGN SYSTEM
   Module 03
   Typography
   Version : v0.10.0-beta
========================================================== */

/* ==========================================
   GOOGLE FONT
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================
   BODY
========================================== */

body{

    font-family:"Inter","Segoe UI",sans-serif;

    color:var(--text-primary);

    font-size:16px;

    font-weight:400;

    line-height:1.7;

}

/* ==========================================
   HEADINGS
========================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--text-primary);

    font-weight:700;

    line-height:1.15;

    letter-spacing:-.03em;

}

/* ==========================================
   H1
========================================== */

h1{

    font-size:clamp(3rem,6vw,5rem);

    font-weight:800;

}

/* ==========================================
   H2
========================================== */

h2{

    font-size:clamp(2.2rem,4vw,3.5rem);

    font-weight:700;

}

/* ==========================================
   H3
========================================== */

h3{

    font-size:1.55rem;

    font-weight:600;

}

/* ==========================================
   H4
========================================== */

h4{

    font-size:1.2rem;

    font-weight:600;

}

/* ==========================================
   PARAGRAPHS
========================================== */

p{

    color:var(--text-secondary);

    font-size:1.05rem;

    line-height:1.8;

}

/* ==========================================
   SMALL TEXT
========================================== */

small{

    color:var(--text-muted);

    font-size:.90rem;

}

/* ==========================================
   SECTION TAG
========================================== */

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    margin-bottom:20px;

    border-radius:999px;

    background:rgba(255,176,0,.10);

    border:1px solid rgba(255,176,0,.25);

    color:var(--brand-gold);

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.14em;

}

/* ==========================================
   SECTION HEADING
========================================== */

.section-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-heading.left-heading{

    margin-left:0;

    text-align:left;

}

.section-heading h2{

    margin-bottom:18px;

}

.section-heading p{

    max-width:680px;

    margin:0 auto;

}

.section-heading.left-heading p{

    margin:0;

}

/* ==========================================
   BRAND NAME
========================================== */

.brand-name{

    font-size:1.35rem;

    font-weight:800;

    background:var(--gradient-brand);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

/* ==========================================
   PRODUCT NAME
========================================== */

.product-name{

    color:var(--text-secondary);

    font-size:.82rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==========================================
   GRADIENT TEXT
========================================== */

.gradient-text{

    background:var(--gradient-brand);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

/* ==========================================
   TEXT UTILITIES
========================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-muted{

    color:var(--text-muted);

}

.text-primary{

    color:var(--text-primary);

}

.text-brand{

    color:var(--brand-orange);

}

/* ==========================================
   EMPHASIS
========================================== */

strong{

    font-weight:700;

    color:var(--text-primary);

}

em{

    font-style:italic;

}