* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: "Rubik", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    color: #555;
    overflow-x: hidden;
}

i {
    line-height: inherit;
    font-size: inherit;
}

/* ---------------------------start ontainer ---------------------------*/
.container {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 3.2rem
}
/* ---------------------------end ontainer ---------------------------*/


/* ---------------------------start grid ---------------------------*/
.grid {
    display: grid;
    column-gap: 6.4rem;
    row-gap: 9.6rem;
}
/* ---------------------------end grid ---------------------------*/


/* ---------------------------start button ---------------------------*/
.btn:link,
.btn:visited {
    display: inline-block;
    text-decoration: none;
    transition: 0.4s;
}
.btn--primary:link,
.btn--primary:visited{
    color: #fff;
    background-color: #e67e22;    
}
.btn--outline:link,
.btn--outline:visited {
    color: #555;   
    background: #fff;
}
.btn--large:link,
.btn--large:visited {
    padding: 1.6rem 3.2rem;
    font-size: 2rem;
    font-weight: 600;
    border-radius: 0.9rem;
    border: none;
}
.btn--medium:link,
.btn--medium:visited {
    padding: 1.2rem 2.4rem;
    border-radius: 0.8rem;
    border: none;
}
.btn--primary:focus, 
.btn--primary:active, 
.btn--outline:focus, 
.btn--outline:active {
    box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5);
}
.btn--primary:hover {
    background-color: #cf711f;    
}
.btn--outline:hover {
    background-color: #fdf2e9;
    box-shadow: inset 0 0 0 3px #fff;
}
/* ---------------------------end button ---------------------------*/