/*==================================================
  GLOBAL.CSS
  Global Website Styles
  Project: (Your New Brand Name)
  Author: John Alagwu
==================================================*/


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

body{
    font-family:var(--body-font);
    font-size:var(--fs-base);
    line-height:1.7;
    color:var(--text);
    background:var(--body);
    overflow-x:hidden;
}


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

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

    font-family:var(--heading-font);
    color:var(--white);
    line-height:1.2;
    font-weight:var(--fw-bold);

}


h1{

    font-size:var(--fs-5xl);

}


h2{

    font-size:var(--fs-4xl);

}


h3{

    font-size:var(--fs-3xl);

}


h4{

    font-size:var(--fs-2xl);

}


h5{

    font-size:var(--fs-xl);

}


h6{

    font-size:var(--fs-lg);

}


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

p{

    color:var(--text-light);
    margin-bottom:var(--space-4);

}


/*==================================================
  SECTIONS
==================================================*/

section{

    position:relative;
    padding:var(--space-11) 0;
    overflow:hidden;

}


/*==================================================
  CONTAINER
==================================================*/

.container{

    width:min(100% - 2rem,var(--container-width));
    margin-inline:auto;
    padding-inline:20px;
    box-sizing:border-box;

}


.content-width{

    max-width:var(--content-width);
    margin-inline:auto;

}


/*==================================================
  IMAGES
==================================================*/

img{

    width:100%;
    height:auto;

}


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

.text-center{

    text-align:center;

}


.text-left{

    text-align:left;

}


.text-right{

    text-align:right;

}


.d-flex{

    display:flex;

}


.d-grid{

    display:grid;

}


.align-center{

    align-items:center;

}


.justify-between{

    justify-content:space-between;

}


.justify-center{

    justify-content:center;

}


.w-100{

    width:100%;

}


/*==================================================
  SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:var(--surface);

}


::-webkit-scrollbar-thumb{

    background:var(--primary);
    border-radius:50px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--primary-light);

}


/*==================================================
  TEXT SELECTION
==================================================*/

::selection{

    background:var(--primary);
    color:var(--body);

}







/*==================================================
PARALLAX
==================================================*/

.parallax{

will-change:transform;

transition:transform .15s ease-out;

}