/*

--- 01 TYPOGRAPHY-SYSTEM:

- FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font-weights:
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line-height:
Default: 1
small: 1.05
medium: 1.2
Paragraph-default: 1.6
large: 1.8

- Letter-spacing:
-0.5px
0.75px

--- 02 COLOR:

- Primary: #f7921e
- Secondary:

- Tints:
#f9a84b

- Shades:
#de831b

- Accents: #000000

- Grays:
#555

--- 05 SHADOWS:
0 2.4rem 4.8rem rgb(0, 0 ,0, 0.075);

--- 06 BOARDER_RADIUS:
default: 9px
medium: 11px

--- 07 WHITE_SPACE:

- SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html {
    font-size: 62.25%;

    overflow-x: hidden;

    scroll-behavior: smooth;
}

body {
    font-family: 'rubik' ,sans-serif;
    line-height: 1;
    font-weight: 400;
    color: #555;

    overflow-x: hidden;
}

*::selection {
    color: #000;
    background-color: #fde9d2;
}

.container {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 3.2rem;
}

.grid {
    display: grid;
    gap: 3.2em;
}

.grid--2-cols {
   grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.heading-primary {
    font-size: 5.2rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #00ff00;

    margin-bottom: 3.2rem;
}

.heading-secondary {
    font-size: 3.6rem;
    line-height: 1.2;
    font-weight: 600;
    color: #00ff00;

    margin-bottom: 9.6rem;
}

.sub-title {
    font-size: 1.6rem;
    text-transform: uppercase;
    color: #fddebc;
    font-weight: 600;
    letter-spacing: 2px;

    margin-bottom: 1.2rem;
}

.btn:link, .btn:visited {
    display: inline-block;

    padding: 1.2rem 2.4rem;
    border-radius: 600px;

    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 600;
    color: #000;

    transition: all 0.3s;
}

.btn-main:link, .btn-main:visited {
    background-color: #f7921e;
}

.btn-main:hover, .btn-main:active {
    background-color: #f7921e;
}
.btn-second:link, .btn-second:visited {
    background-color: #fde9d2;
}

.btn-second:hover, .btn-second:active {
    background-color: #fddebc;
}

.margin-right-sm {
    margin-right: 1.6rem;
}

strong {
    font-weight: 600;
}

.center {
    text-align: center;
}

.tag {
    padding: 0.4rem 0.8rem;
    font-size: 1.2rem;
    border-radius: 1000px;
    box-shadow: 0 1.2rem 2.4rem 0 #00000015;
    background-color: #fddebc;
    color: #444;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
}

.icon {
    background-color: #fddebc;
    border-radius: 50%;
    width: 3.6rem;
    height: 3.6rem;
}

.counter {
    display: flex;
    border-radius: 1000px;
    box-shadow: 0 1.2rem 2.4rem 0 #00000015;
}

.plus{
    padding: 0.2rem 0.8rem;
    background-color: #fddebc;
    font-weight: 600;
    font-size: 1.6rem;
    color: #f7921e;
    border-radius: 1000px 0 0 1000px;
    border: none;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}


.minus {
    padding: 0.2rem 0.8rem;
    background-color: #fddebc;
    font-weight: 600;
    font-size: 1.6rem;
    color: #f7921e;
    border-radius: 0 1000px 1000px 0;
    border: none;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.plus:hover, .minus:hover {
    background-color: #fcd3a5;
}

.number {
    font-size: 1.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fddebc;
    color: #f7921e;
    padding: 0.4rem;
    width: 3rem;
}