body {
    background: var(--secondary-bg-clr);
}

main {
    padding-inline: 1em;

    display: flex;
    flex-direction: column;
    gap: 4em;
}

.index-title {
    text-align: center;
}

.index-title .title-text {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.index-title .title-text h1 {
    font-family: var(--secondary-font);
    font-size: 3.5em;
}

.index-title .title-text h1 span {
    color: var(--secondary-clr);
}

.index-title .title-text .link-button {
    width: 40%;
    margin: 0 auto;
}

.index-about-us .section-hero ul {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.index-about-us .section-hero ul li {
    display: flex;
    gap: 1em;

    padding: 1em;

    background: var(--tertiary-clr);
    border-left: 3px solid var(--secondary-clr);
}

.index-about-us .section-hero ul li .list-text {
    width: 90%;
    margin: 0 auto;
}

.index-about-us .section-hero ul li .list-text h1,
.index-about-us .section-hero ul li svg {
    color: var(--secondary-clr);
}

.index-about-us .section-hero ul li .list-text h1 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.index-about-us .section-hero ul li .list-text span {
    font-weight: bold;
}

.section-hero .product-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.product-view a{
    background: var(--tertiary-clr);
}


@media(min-width:1024px) {
    .index-title {
        height: 70vh;

        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .index-title .title-img {
        width: 25vw;
        height: 50vh;

        background: url("https://res.cloudinary.com/dw2eqq9kk/image/upload/v1755095738/preview_mrnjei.png") center center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .index-title .title-text .link-button {
        width: 60%;
        margin: 0 auto;
    }

    .index-about-us .section-hero ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .section-hero .product-list {
        width: 98%;

        padding: 2em 1em 2em 1em;
        margin: 0 auto;

        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .product-list {
        overflow: auto;
    }
}


@media(min-width: 1800px) {
    .index-title .title-text h1 {
        font-size: 4em;

    }
}