/* =============================================================================
   MY Accounting & Tax Solutions
============================================================================= */

/*
|--------------------------------------------------------------------------
| File        : style.css
| File Code   : CSS002
| Version     : 1.0.0
| Description : Global Website Styles
| Author      : MY Accounting & Tax Solutions
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   RESET
========================================================================== */

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/* ==========================================================================
   HTML
========================================================================== */

html{

    scroll-behavior:smooth;

    font-size:16px;

}


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

body{

    font-family:var(--font-body);

    font-size:var(--font-size-md);

    font-weight:var(--font-normal);

    line-height:1.7;

    color:var(--dark);

    background:var(--white);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


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

img{

    max-width:100%;

    height:auto;

    display:block;

}


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

a{

    color:var(--primary-color);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--secondary-color);

}


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

ul,
ol{

    list-style:none;

    padding:0;

    margin:0;

}


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

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

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

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

    color:var(--primary-color);

    line-height:1.2;

    margin-bottom:20px;

}

h1{

    font-size:var(--font-size-hero);

}

h2{

    font-size:2.6rem;

}

h3{

    font-size:2rem;

}

h4{

    font-size:1.5rem;

}

h5{

    font-size:1.25rem;

}

h6{

    font-size:1rem;

}


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

p{

    margin-bottom:20px;

    color:var(--dark-grey);

}


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

.container{

    max-width:var(--container-width);

}


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

.section{

    padding:var(--section-padding) 0;

}


/* ==========================================================================
   TEXT HELPERS
========================================================================== */

.text-primary{

    color:var(--primary-color)!important;

}

.text-secondary{

    color:var(--secondary-color)!important;

}

.text-center{

    text-align:center;

}


/* ==========================================================================
   BACKGROUND HELPERS
========================================================================== */

.bg-primary{

    background:var(--primary-color);

}

.bg-secondary{

    background:var(--secondary-color);

}

.bg-light{

    background:var(--background);

}

.bg-white{

    background:var(--white);

}


/* ==========================================================================
   SHADOW HELPERS
========================================================================== */

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow-md{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}


/* ==========================================================================
   BORDER RADIUS
========================================================================== */

.rounded{

    border-radius:var(--border-radius);

}

.rounded-lg{

    border-radius:var(--border-radius-lg);

}


/* ==========================================================================
   SPACING
========================================================================== */

.mt-section{

    margin-top:var(--section-padding);

}

.mb-section{

    margin-bottom:var(--section-padding);

}


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

::selection{

    background:var(--primary-color);

    color:var(--white);

}


/* ==========================================================================
   SCROLLBAR (CHROME / EDGE)
========================================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--background);

}

::-webkit-scrollbar-thumb{

    background:var(--primary-color);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary-color);

}
/* ==========================================================================
   SCROLL REVEAL
========================================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:opacity .8s ease,
               transform .8s ease;

}

.fade-up.animate{

    opacity:1;

    transform:translateY(0);

}