@media (min-width: 1200px) {
    .content-container {
        max-width: 1140px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(10dvh);
}

/* Section1 */
.index-section1-container {
    width: 96%;
    margin: 0 auto;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    min-height: 30rem;
    align-items: center;
    flex-direction: column;
    background-image: url(/images/Index/Section1-background.webp);
    background-position: center;
    background-size: cover;
    border-radius: 1.3rem;
    gap: 1rem;
}

.section1-items-container {
    display: flex;
    gap: 2rem;
}

.section1-item {
    padding: 0.5rem 2rem;
    color: var(--PrimaryColor7);
    background-color: var(--PrimaryColor1);
    border-radius: 1.3rem;
    transition: all 0.2s ease-in-out;
}

    .section1-item:hover {
        transform: translateY(-4px);
    }

.index-section1-h1 {
    text-align: center;
    color: var(--PrimaryColor7);
    font-size: 2.5rem;
}

/* Section2 */
.index-section2-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10rem;
}

.section2-image-responsive {
    display: none;
}

.index-section2-h2 {
    font-size: 2.5rem;
}

.index-section2-p, .index-section2-h2 {
    text-align: center;
    color: var(--PrimaryColor6);
}

.section2-content-container {
    margin-top: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section2-items-container {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.section2-items {
    display: flex;
    gap: 2rem;
}

.section2-item {
    width: 12rem;
    height: 12rem;
    padding: 1.5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s ease-in-out;
}

    .section2-item:hover {
        transform: translateY(-4px);
        box-shadow: 0px 4px 10px #5555;
    }

.section2-item-image {
    width: 6rem;
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
}

.section2-item-gray {
    background-color: #f9f9f9;
}

.section2-item-purple {
    background-color: #f5f4fe;
}

.section2-image-container {
    width: 55%;
}

.section2-image {
    width: 100%;
}

.section2-item-info {
    margin: 0;
    text-align: center;
    color: var(--PrimaryColor6);
    font-weight: 500;
}

.index-section2-p {
    width: 70%;
    margin: 0 auto;
    margin-top: 2rem;
}

/* Section3 */
.index-section3-container {
    display: flex;
    flex-direction: column;
    margin-top: 10rem;
    justify-content: center;
    align-items: center;
    gap: 6rem;
}

.section3-image-container, .section3-image {
    width: 100%;
}

.section3-content-container {
    display: flex;
    width: 100%;
    gap: 12rem;
}

.section3-content-container {
    display: flex;
    width: 100%;
    gap: 10rem;
}

.section3-item-button {
    color: var(--PrimaryColor7);
    padding: 0.5rem 1rem;
    background-color: #006eff;
    border-radius: 5rem;
    transition: transform 0.2s ease-in-out;
}

    .section3-item-button:hover {
        color: var(--PrimaryColor7);
        transform: translateY(-8px);
        cursor: pointer;
    }

.section3-item-text {
    text-align: justify;
    margin-bottom: 2rem;
}

.section3-item-information {
    width: 50%;
    padding: 0.8rem;
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
}

    .section3-item-information:hover {
        transform: translateY(-4px);
        box-shadow: 0px 4px 10px #5555;
    }

/* Section4 */
.index-section4-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 30rem;
    background-image: url(/images/Index/Section4-background.webp);
    background-position: center;
    background-size: cover;
    border-radius: 1.3rem;
    padding: 5rem;
    margin-top: 10rem;
}

.index-section4-h2 {
    font-size: 2.5rem;
    color: var(--PrimaryColor7);
    text-align: center;
}

.index-section4-p {
    text-align: center;
    color: var(--PrimaryColor7);
}

.section4-item-info {
    margin: 0;
    color: var(--PrimaryColor7);
}

.section4-item-image {
    width: 3rem;
}

.section4-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.2s ease-in-out;
}

    .section4-item:hover {
        transform: translateY(-4px);
    }

.section4-items-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.section4-content-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-top: 3rem;
}

.section4-icon-container {
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    color: var(--PrimaryColor7);
}

/* Section5 */
.index-section5-container {
    width: 100%;
    display: flex;
    gap: 4rem;
    align-items: start;
    margin-top: 10rem;
}

.section5-item-container {
    width: 25rem;
    height: 24rem;
    padding: 1rem 0.3rem;
    border-radius: 1rem;
    box-shadow: 0 4px 10px #5555;
    transition: all 0.2s ease-in-out;
}

    .section5-item-container:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 10px var(--PrimaryColor1);
    }

.section5-content-container {
    padding: 1rem;
    border: 2px solid var(--PrimaryColor1);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
}

.section5-item-image {
    width: 100%;
}

.section5-item-info {
    text-align: center;
    width: 95%;
    color: var(--PrimaryColor6);
}

/* Section6 */
.index-section6-container {
    margin-top: 10rem;
    width: 100vw;
    display: flex;
    gap: 15rem;
    background-color: #f5f4fe;
    padding: 6rem 0;
    justify-content: center;
}

.section6-item-image {
    width: 3.5rem;
    margin-bottom: 1rem;
}

.section6-item-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--PrimaryColor6);
}

.section6-item-information {
    color: var(--PrimaryColor6);
}

.section6-items-container {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 50%;
}

.section6-content-container {
    max-width: 1140px;
    display: flex;
    gap: 15rem;
}

.section6-item-container {
    width: 100%;
    padding: 0.6rem;
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
}

    .section6-item-container:hover {
        transform: translateY(-4px);
        box-shadow: 0px 4px 10px #5555;
    }

/* Section7 */
.index-section7-container {
    width: 100%;
    display: flex;
    margin-top: 10rem;
    justify-content: space-between;
}

.section7-image-container {
    width: 55%;
}

.section7-image {
    width: 100%;
}

.section7-information-h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--PrimaryColor6);
}

.section7-information-container {
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.section7-information-p {
    text-align: justify;
    color: var(--PrimaryColor6);
}

.section7-information-a {
    background-color: #006eff;
    text-align: center;
    width: 8rem;
    padding: 0.6rem 1rem;
    color: var(--PrimaryColor7);
    border-radius: 4rem;
    transition: transform 0.2s ease-in-out;
}

    .section7-information-a:hover {
        color: var(--PrimaryColor7);
        transform: translateY(-4px);
        cursor: pointer;
    }

/* Responsive */
@media (max-width: 950px) {
    .index-section1-container {
        background-size: 140%;
    }

    .index-section2-h2 {
        width: 90%;
        margin: 0 auto;
    }

    .section2-image-desktop {
        display: none;
    }

    .section2-image-responsive {
        display: block;
    }

    .section2-items-container {
        align-items: center;
    }

    .index-section2-p {
        font-size: 1.3rem;
        width: 80%;
        margin-bottom: 2rem;
    }

    .section2-content-container {
        flex-direction: column;
        gap: 6rem;
    }

    .section2-image-container {
        width: 75%;
    }

    .section2-item {
        width: 16rem;
        height: 16rem;
    }

    .section2-item-image {
        width: 9rem;
        top: -4rem;
    }

    .section2-item-info {
        font-size: 1.3rem;
    }

    .section3-image-container {
        width: 95%;
    }

    .section3-content-container {
        flex-direction: column;
        align-items: center;
    }

    .section3-item-information {
        width: 65%;
    }

    .section3-item-text {
        font-size: 1.3rem;
    }

    .section3-item-button {
        font-size: 1.3rem;
    }

    .index-section4-container {
        width: 95%;
        margin: 0 auto;
        margin-top: 10rem;
        padding: 4rem;
    }

    .index-section4-p {
        font-size: 1.3rem;
    }

    .section4-content-container {
        gap: 2.5rem;
        flex-direction: column;
    }

    .section4-items-container {
        width: 65%;
    }

    .section4-item-info {
        font-size: 1.3rem;
    }

    .section4-item-image {
        width: 4rem;
    }

    .index-section5-container {
        align-items: center;
        flex-direction: column;
    }

    .section5-item-container {
        width: 35rem;
        height: 34rem;
        padding: 1rem;
    }

    .section5-item-info {
        font-size: 1.3rem;
    }

    .section6-content-container {
        gap: 5rem;
        flex-direction: column;
        align-items: center;
    }

    .section6-items-container {
        width: 60%;
    }

    .section6-item-title {
        font-size: 1.6rem;
    }

    .section6-item-information {
        font-size: 1.3rem;
    }

    .index-section7-container {
        flex-direction: column-reverse;
        align-items: center;
        gap: 2rem;
    }

    .section7-image-container {
        width: 65%;
    }

    .section7-information-container {
        width: 65%;
    }

    .section7-information-p {
        font-size: 1.3rem;
    }

    .section7-information-a {
        width: 11rem;
        font-size: 1.3rem;
    }
}

@media (max-width: 500px) {
    .index-section1-h1 {
        font-size: 1.6rem;
    }

    .index-section1-container {
        background-size: 220%;
    }

    .section1-items-container {
        flex-wrap: wrap;
        gap: 0.1rem 1rem;
        width: 70%;
        justify-content: space-evenly;
    }

    .index-section2-h2 {
        font-size: 1.6rem;
    }

    .index-section2-p {
        font-size: 1rem;
    }

    .section2-image-container {
        width: 85%;
    }

    .section2-content-container {
        margin-top: 3rem;
    }

    .section2-items {
        gap: 5rem;
        flex-direction: column;
    }

    .section2-item-info {
        font-size: 1rem;
    }

    .section2-item {
        width: 20rem;
    }

    .section3-item-information {
        display: flex;
        flex-direction: column;
    }

    .section3-item-information {
        width: 75%;
    }

    .section3-image-container {
        width: 90%;
    }

    .section3-item-title {
        text-align: center;
        font-size: 1.6rem;
    }

    .section3-item-text {
        font-size: 1rem;
    }

    .section3-item-button {
        font-size: 1rem;
        margin: 0 auto;
    }

    .section3-content-container {
        gap: 4rem;
    }

    .index-section4-h2 {
        font-size: 1.6rem;
    }

    .index-section4-p {
        font-size: 1rem;
    }

    .index-section4-container {
        padding: 4rem 2rem;
    }

    .section4-item-info {
        font-size: 1rem;
    }

    .section4-item-image {
        width: 3rem;
    }

    .section4-items-container {
        width: 75%;
        gap: 1.5rem;
    }

    .section4-content-container {
        gap: 1.5rem;
    }

    .index-section4-p {
        width: 95%;
    }

    .section5-item-container {
        width: 95%;
        height: 27rem;
    }

    .section5-item-info {
        font-size: 1rem;
    }

    .index-section6-container {
        width: 100%;
    }

    .section6-items-container {
        width: 75%;
    }

    .section6-items-container, .section6-item-information {
        font-size: 1rem;
    }

    .section6-item-image {
        width: 3rem;
    }

    .section7-image-container {
        width: 85%;
    }

    .section7-information-container {
        width: 70%;
        align-items: center;
    }

    .section7-information-h2 {
        font-size: 1.6rem;
    }

    .section7-information-h2, .section7-information-p {
        text-align: center;
    }

    .section7-information-p, .section7-information-a {
        font-size: 1rem;
    }
}