*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
*:focus{
    outline: none;
    /* border-radius: 4px  ;
    box-shadow: 0 0 0 0.8rem color-mix(in srgb, var(--color-primary) 50%, transparent);    */
}
html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    line-height: 1;
    font-weight: 400;
    color: var(--color-black);
    font-family: Bitter, sans-serif;
    overflow-x: hidden;
    background-color: var(--color-white);
        
}
p {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-black);
}
p,span{
    font-family: Roboto, sans-serif;
}
h1,h2{
    font-weight: 700;
}
img{
    max-width: 100%;
}
a {
    text-decoration: none;
    color: var(--color-black);
}
h1{
    font-size: 5.2rem;
    line-height: 1.2;
}
h2{
    font-weight: 600;
    font-size: 4.8rem;
    line-height: 1.2;
    color: var(--color-black);
}
/* CLASSES */
.container{
    max-width: 137.6rem;
    padding: 7.2rem 4.8rem;
    margin: 0 auto;
}
.tint-bg{
    background-color: var(--color-tint) !important;
}
.grid{
    display: grid;
}
.grid--2-columns{
    grid-template-columns: 1fr 1fr;
    column-gap: 7rem;
}
.grid--3-columns{
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 3.2rem;
}
.cta-button.cta--color-secondary{
    background-color: var(--color-secondary) ;
    border: 2px solid var(--color-secondary) ;
}
.cta-button.cta--color-secondary:hover{
    color: var(--color-secondary);
}
.seciotn-pointer{
    position: relative;
    top: -8.4rem;
}