/* ==========================================================
   BASE
   ========================================================== */



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

  body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);

    color: var(--clr-body);
    background: var(--clr-white);

    overflow-x: hidden;
  }

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

    margin:0;

    font-family:var(--ff-heading);

    color:var(--clr-heading);

    font-weight:var(--fw-bold);

    line-height:var(--lh-heading);

}

h1{

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

    line-height:var(--lh-hero);

    letter-spacing:var(--letter-spacing-hero);

}

h2{

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

}

h3{

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

}



h4{

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

}

p{

    margin:0;

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

    line-height:var(--lh-body);

}


a{

    color:inherit;

    text-decoration:none;

    transition:color var(--transition);

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

button{

    font:inherit;

    cursor:pointer;

}

ul,
ol{

    list-style:none;

    margin:0;

    padding:0;

}

::selection{

    background:var(--clr-accent);

    color:var(--clr-white);

}

.why__card h4{

    margin-top: 16px;
    margin-bottom: 20px;

}


.company-slogan {
    color: var(--clr-bg-light) ;
    margin-bottom: 24px;
}

.active--page {
    color: var(--clr-accent) !important;
    font-weight: 600 !important;
}

p {
    color: var(--clr-heading);
    line-height: 160%;
}

html,
body {
    overflow-x: hidden;
}