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

body{
    font-size:16px;
    line-height:1.7;
    font-weight:400;
}

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

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

    color:var(--heading);

    font-weight:700;

    line-height:1.2;

}

h1{

    font-size:64px;

}

h2{

    font-size:48px;

}

h3{

    font-size:32px;

}

h4{

    font-size:26px;

}

h5{

    font-size:22px;

}

h6{

    font-size:18px;

}

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

p{

    color:var(--text);

    margin-bottom:20px;

}

/*==============================
SECTION TITLE
==============================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    display:inline-block;

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:15px;

    font-weight:600;

    margin-bottom:12px;

}

.section-title h2{

    margin-bottom:20px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}

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

@media(max-width:992px){

    h1{

        font-size:52px;

    }

    h2{

        font-size:40px;

    }

}

@media(max-width:768px){

    h1{

        font-size:40px;

    }

    h2{

        font-size:32px;

    }

    h3{

        font-size:26px;

    }

    body{

        font-size:15px;

    }

}