/*=========================================================
    HP-EXAM-PRO
    TYPOGRAPHY.CSS
    --------------------------------------------------------
    Typography System
==========================================================*/

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

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

h1{
    font-size: var(--font-4xl);
}

h2{
    font-size: var(--font-3xl);
}

h3{
    font-size: var(--font-2xl);
}

h4{
    font-size: var(--font-xl);
}

h5{
    font-size: var(--font-lg);
}

h6{
    font-size: var(--font-md);
}

/*==============================
    PARAGRAPH
==============================*/

p{
    font-size: var(--font-md);
    color: var(--gray-700);
    line-height: 1.8;
    margin-bottom: 1rem;
}

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

small,
.small{
    font-size: var(--font-sm);
    color: var(--gray-600);
}

/*==============================
    STRONG
==============================*/

strong,
b{
    font-weight: var(--fw-bold);
}

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

em,
i{
    font-style: italic;
}

/*==============================
    LINKS
==============================*/

a{
    color: var(--primary);
    transition: var(--transition);
}

a:hover{
    color: var(--primary-dark);
    text-decoration: none;
}

/*==============================
    LISTS
==============================*/

ul{
    margin-bottom: 1rem;
}

ul li{
    margin-bottom: .5rem;
}

ol{
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

ol li{
    margin-bottom: .5rem;
}

/*==============================
    BLOCKQUOTE
==============================*/

blockquote{
    border-left: 5px solid var(--primary);
    padding: 1rem 1.5rem;
    background: var(--gray-100);
    font-style: italic;
    margin: 2rem 0;
}

blockquote p{
    margin: 0;
}

/*==============================
    CODE
==============================*/

code{
    background: var(--gray-200);
    color: var(--danger);
    padding: .2rem .5rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
}

pre{
    background: var(--gray-900);
    color: var(--white);
    padding: 1rem;
    border-radius: var(--radius);
    overflow-x: auto;
    margin-bottom: 1rem;
}

pre code{
    background: transparent;
    color: inherit;
    padding: 0;
}

/*==============================
    HORIZONTAL RULE
==============================*/

hr{
    border: 0;
    border-top: 1px solid var(--gray-300);
    margin: 2rem 0;
}

/*==============================
    TEXT COLORS
==============================*/

.text-primary{
    color: var(--primary) !important;
}

.text-secondary{
    color: var(--secondary) !important;
}

.text-success{
    color: var(--success) !important;
}

.text-danger{
    color: var(--danger) !important;
}

.text-warning{
    color: var(--warning) !important;
}

.text-info{
    color: var(--info) !important;
}

.text-dark{
    color: var(--gray-900) !important;
}

.text-muted{
    color: var(--gray-600) !important;
}

.text-white{
    color: var(--white) !important;
}

/*==============================
    TEXT ALIGNMENT
==============================*/

.text-start{
    text-align: left !important;
}

.text-center{
    text-align: center !important;
}

.text-end{
    text-align: right !important;
}

/*==============================
    FONT WEIGHTS
==============================*/

.fw-light{
    font-weight: var(--fw-light) !important;
}

.fw-normal{
    font-weight: var(--fw-normal) !important;
}

.fw-medium{
    font-weight: var(--fw-medium) !important;
}

.fw-semibold{
    font-weight: var(--fw-semibold) !important;
}

.fw-bold{
    font-weight: var(--fw-bold) !important;
}

/*==============================
    TEXT TRANSFORM
==============================*/

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

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

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

/*==============================
    TEXT DECORATION
==============================*/

.text-decoration-none{
    text-decoration: none !important;
}

.text-decoration-underline{
    text-decoration: underline !important;
}

/*==============================
    LINE HEIGHT
==============================*/

.lh-1{
    line-height: 1;
}

.lh-sm{
    line-height: 1.4;
}

.lh-base{
    line-height: 1.7;
}

.lh-lg{
    line-height: 2;
}

/*==============================
    LETTER SPACING
==============================*/

.letter-spacing-sm{
    letter-spacing: .5px;
}

.letter-spacing-md{
    letter-spacing: 1px;
}

.letter-spacing-lg{
    letter-spacing: 2px;
}

/*==============================
    RESPONSIVE TYPOGRAPHY
==============================*/

@media (max-width:992px){

    h1{
        font-size:3rem;
    }

    h2{
        font-size:2.4rem;
    }

    h3{
        font-size:1.8rem;
    }

}

@media (max-width:768px){

    h1{
        font-size:2.4rem;
    }

    h2{
        font-size:2rem;
    }

    h3{
        font-size:1.6rem;
    }

    h4{
        font-size:1.3rem;
    }

}

@media (max-width:576px){

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.7rem;
    }

    h3{
        font-size:1.4rem;
    }

    p{
        font-size:.95rem;
    }

}