/* INDEX PAGE */
header {
    margin-top: 20vh;
	width: 100vw;
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--item-pdd) * 3);
}

header h1 {
    font-size: 100px;
}

header p {
    margin-bottom: 25px;
}

.content {
    margin: 0px var(--item-pdd);
}

.content button {
    font-weight: bold;
}

.content button i {
    margin-left: 12.5px;
    transition: .3s;
}
.content button:hover i {
    transform: translateX(6.25px);
}

.content a {
    margin-left: 25px;
}

.image {
    display: flex;
    justify-content: center;
}

.image img {
    width: 100%;
    max-width: 536px;
}

.numbers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid var(--secondary-bg);
    padding: calc(var(--item-pdd) * 2);
    border-radius: var(--item-rad);
    gap: 25px;
}

.number {
    flex: 1;
}

.number h3 {
    margin: 0px;
}
.number p {
    margin: 0px;
    color: var(--secondary-font-clr);
    font-size: 20px;
}

.quote {
    display: flex;
    flex-direction: column;
}

.quote img {
    width: 50px;
}

.quote-text {
    text-align: left;
}

.quote-text p {
    font-weight: bold;
}

@media (min-width: 640px) {
    .numbers {
        flex-direction: row;
        gap: 0px;
    }
    
    .quote {
        flex-direction: row;
        gap: calc(var(--item-pdd) * 2);
    }

    .quote img {
        width: 100px;
    }
}

@media (min-width: 768px) {
    .quote img {
        width: 150px;
    }

    .quote-text p {
        font-size: 25px;
    }
}

@media (min-width: 1024px) {
    header {
        margin-top: 0px;
        flex-direction: row;
        height: 100vh;
        gap: 0px;
    }

    header > div {
        width: 50%;
    }

    .content {
        margin: 0px 50px 0px 100px;
    }
}

@media (min-width: 1536px) {
    .content {
        width: 600px;
        margin: 0px auto;
    }
}