/*======================================
EIVOX TYPOGRAPHY CSS
Version: 1.0
======================================*/


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

body{
    font-family:var(--font-primary);
    font-size:var(--font-md);
    font-weight:var(--weight-normal);
    line-height:1.6;
    color:var(--text);
}


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

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--font-secondary);
    font-weight:var(--weight-bold);
    color:var(--text);
    line-height:1.2;
    margin-bottom:var(--space-3);
}

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

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

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

h4{
    font-size:1.25rem;
}

h5{
    font-size:1.125rem;
}

h6{
    font-size:1rem;
}


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

p{
    font-size:var(--font-md);
    color:var(--text-light);
    line-height:1.8;
    margin-bottom:var(--space-4);
}


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

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

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


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

small{
    font-size:var(--font-sm);
    color:var(--text-muted);
}


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

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


/*======================================
LABEL
======================================*/

label{
    display:block;
    margin-bottom:var(--space-2);
    font-weight:var(--weight-medium);
    color:var(--text);
}


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

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

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

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

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

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

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

.text-light{
    color:var(--text-light);
}

.text-muted{
    color:var(--text-muted);
}

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


/*======================================
TEXT SIZES
======================================*/

.text-xs{
    font-size:var(--font-xs);
}

.text-sm{
    font-size:var(--font-sm);
}

.text-md{
    font-size:var(--font-md);
}

.text-lg{
    font-size:var(--font-lg);
}

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

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

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


/*======================================
FONT WEIGHT
======================================*/

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

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

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

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

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

.fw-extrabold{
    font-weight:var(--weight-extrabold);
}


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

.uppercase{
    text-transform:uppercase;
}

.lowercase{
    text-transform:lowercase;
}

.capitalize{
    text-transform:capitalize;
}


/*======================================
TEXT TRUNCATE
======================================*/

.text-truncate{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


/*======================================
PAGE TITLES
======================================*/

.page-title{
    font-size:2.25rem;
    font-weight:var(--weight-bold);
    margin-bottom:var(--space-4);
}

.page-subtitle{
    font-size:var(--font-lg);
    color:var(--text-muted);
    margin-bottom:var(--space-6);
}


/*======================================
SECTION TITLES
======================================*/

.section-title{
    font-size:2rem;
    font-weight:var(--weight-bold);
    margin-bottom:var(--space-3);
}

.section-description{
    max-width:700px;
    color:var(--text-light);
    margin-bottom:var(--space-6);
}


/*======================================
PRICE
======================================*/

.price{
    font-size:1.4rem;
    font-weight:var(--weight-bold);
    color:var(--success);
}

.old-price{
    color:var(--text-muted);
    text-decoration:line-through;
}


/*======================================
BADGES
======================================*/

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:var(--radius-round);
    font-size:var(--font-xs);
    font-weight:var(--weight-semibold);
}

.badge-primary{
    background:var(--primary);
    color:#fff;
}

.badge-success{
    background:var(--success);
    color:#fff;
}

.badge-danger{
    background:var(--danger);
    color:#fff;
}

.badge-warning{
    background:var(--warning);
    color:#fff;
}


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

@media (max-width:991px){

    h1{
        font-size:2.2rem;
    }

    h2{
        font-size:1.8rem;
    }

    .page-title{
        font-size:2rem;
    }

}

@media (max-width:767px){

    h1{
        font-size:1.9rem;
    }

    h2{
        font-size:1.6rem;
    }

    h3{
        font-size:1.3rem;
    }

    .page-title{
        font-size:1.8rem;
    }

    .section-title{
        font-size:1.6rem;
    }

    p{
        font-size:.95rem;
    }

}