/* !style rules for intro section */

.intro__left--text {
    font-size: var(--body);
    color: var(--color-white-75);
}

@media(max-width: 768px) {
    .intro {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .intro__right {
        order: 0;
    }

    .intro__left {
        order: 1;
    }
}

/* !style rules for section One */

@media(max-width: 768px) {
    .sectionOne {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .sectionOne__right {
        order: 0;
    }

    .sectionOne__left {
        order: 1;
    }
}

/* !style rules for section Two */

@media(max-width: 768px) {
    .sectionTwo {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .sectionTwo__right {
        order: 1;
    }

    .sectionTwo__left {
        order: 0;
    }
}


/* !style rules for section five */

.sectionFive {
    margin-bottom: 10px;
}

.sectionFive__contents--text {
    font-size: var(--sub);
    font-family: var(--font-2);
}

[class^="sectionFive__cards--"] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 25px;
    box-shadow: var(--shadow-1);
}

.sectionFive__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    align-items: center;
    justify-content: center;



}

.sectionFive__btn {
    align-self: center;
}

@media(max-width:768px) {
    .sectionFive__cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:568px) {
    .sectionFive__cards {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .footerLinks {
        display: flex;
        flex-direction: column;
        gap: 15px;

    }
}