/* ==========================================================
   ClueCRM UI
   TYPOGRAPHY
   Version : 1.0
==========================================================*/

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

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

body{
    font-family:var(--iv-font-body);
    font-size:var(--iv-fs-md);
    color:var(--iv-text);
    background:var(--iv-bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

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

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--iv-font-heading);
    font-weight:700;
    color:var(--iv-text);
    margin:0;
    line-height:1.15;
}

h1{
    font-size:3.5rem;
}

h2{
    font-size:2.75rem;
}

h3{
    font-size:2rem;
}

h4{
    font-size:1.5rem;
}

h5{
    font-size:1.25rem;
}

h6{
    font-size:1rem;
}

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

p{
    margin:0;
    color:var(--iv-text-secondary);
}

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

a{
    color:var(--iv-primary);
    text-decoration:none;
    transition:var(--iv-transition);
}

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

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

ul,
ol{
    margin:0;
    padding:0;
}

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

.fw-light{
    font-weight:300;
}

.fw-normal{
    font-weight:400;
}

.fw-medium{
    font-weight:500;
}

.fw-semibold{
    font-weight:600;
}

.fw-bold{
    font-weight:700;
}

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

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

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

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

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

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

.text-muted{
    color:var(--iv-text-light)!important;
}

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

.text-white{
    color:white!important;
}

/*=========================================================
  TEXT ALIGN
=========================================================*/

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

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

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

/*=========================================================
  DISPLAY TITLES
=========================================================*/

.iv-display{
    font-family:var(--iv-font-heading);
    font-size:4rem;
    font-weight:700;
    line-height:1.05;
    letter-spacing:-1px;
}

.iv-title{
    font-size:2.5rem;
    font-weight:700;
}

.iv-subtitle{
    font-size:1.125rem;
    color:var(--iv-text-secondary);
    line-height:1.8;
}

.iv-caption{
    font-size:.875rem;
    color:var(--iv-text-light);
}

.iv-overline{
    font-size:.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--iv-primary);
}

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

@media(max-width:992px){

    h1{
        font-size:3rem;
    }

    h2{
        font-size:2.25rem;
    }

    .iv-display{
        font-size:3rem;
    }

}

@media(max-width:768px){

    h1{
        font-size:2.4rem;
    }

    h2{
        font-size:2rem;
    }

    h3{
        font-size:1.6rem;
    }

    .iv-display{
        font-size:2.4rem;
    }

}