/*=============== SUCCESS ===============*/
.success {
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 220px 80px;

    .success__container {
        display: flex;
        justify-content: center;
        align-items: center;

        .success__content {
            max-width: 580px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 10px;

            .success__logo {
                max-width: 452px;
                width: 100%;
                height: 220px;
            }

            .success__title {
                font-size: 40px;
                font-weight: var(--font-semi-bold);
                color: var(--headings);
            }

            .success__description {
                font-size: 20px;
                font-weight: var(--font-regular);
                color: var(--text);
            }

            .success__timer {
                font-size: 16px;
                color: var(--subtext);
                margin-block: 10px;

                #countdown {
                    font-weight: var(--font-bold);
                    color: var(--red);
                }
            }

            .success__actions {
                margin-top: 10px;

                .success__btn {
                    background-color: var(--headings);
                    color: var(--white);
                    padding: 14px 28px;
                    border-radius: 8px;
                    width: 260px;
                    font-size: 20px;
                    font-weight: var(--font-medium);
                    transition: all 0.3s ease;
                    border: none;
                    cursor: pointer;


                    &:hover {
                        background-color: var(--red);
                    }
                }
            }
        }
    }
}

/*=============== RESPONSIVE (SUCCESS) ===============*/
@media (max-width: 1200px) {
    .success {
        .success__container {
            .success__content {
                .success__logo {
                    max-width: 380px;
                    height: auto;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .success {
        padding-block: 150px 60px;

        .success__container {
            .success__content {
                .success__logo {
                    max-width: 320px;
                    height: auto;
                }
                .success__title {
                    font-size: 32px;
                }
                .success__description {
                    font-size: 18px;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    /* Standard empty media query */
}

@media (max-width: 576px) {
    .success {
        padding-block: 130px 40px;

        .success__container {
            .success__content {
                .success__logo {
                    max-width: 260px;
                }
                .success__title {
                    font-size: 26px;
                }
                .success__description {
                    font-size: 16px;
                }
                .success__actions {
                    width: 100%;
                    display: flex;
                    justify-content: center;

                    .success__btn {
                        width: 100%;
                        max-width: 280px;
                        font-size: 18px;
                        padding: 12px 24px;
                    }
                }
            }
        }
    }
}