/* @font-face {
    font-family: "DIN Pro";
    src: url("https://db.onlinewebfonts.com/t/15a478cc0eb1d84f4077a2a9d28df0b2.eot");
    src:
        url("https://db.onlinewebfonts.com/t/15a478cc0eb1d84f4077a2a9d28df0b2.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/15a478cc0eb1d84f4077a2a9d28df0b2.woff")format("woff");
} */

.checkpoint-page {
    font-family: lato;
    line-height: 1;
}

.checkpoint-banner {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
        margin-bottom: 2rem;
    }

    .banner-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #222222;

        h1 {
            margin: 0.7rem;
            font-size: 3.5rem;
            font-weight: 500;
            font-weight: bold;
        }

        p {
            margin: 0.5rem 0 0 0;
            font-size: 2.5rem;
            font-weight: 500;
            color: #DF116e;
            display: flex;
            gap: 1rem;

            span {
                font-size: large;
            }
        }

        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 1rem 0 1.5rem 0;

            p {
                margin: 0.5rem 0 0 0;
                color: #797a7a;
                font-size: 1rem;
                font-weight: 500;
                margin-top: -0.1rem;
            }

        }

        h6 {
            margin: -0.3rem;
        }
    }

    .banner-btn {
        display: flex;
        gap: 1rem;

        button {
            border: 1px solid #df126e;
            padding: 1rem 2rem;
            color: #df126e;
            background-color: white;
            font-weight: 700;
            cursor: pointer;

            /* &:hover {
                color: white;
                background-color: #df126e;
            } */
        }

        button:first-child {
            background-color: #df126e;
            color: white;

            /* &:hover {
                color: #df126e;
                background-color: white;
            } */
        }
    }
}

.checkpoint-hero-image {
    display: flex;
    justify-content: center;
    margin: 2rem auto 4rem auto;

    img {
        border: none;
        width: 100%;
    }
}

.checkpoint-page-content {
    background-color: #3d283b;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;

    .main-heading {
        display: flex;
        margin: 1rem auto 2rem auto;
        text-align: center;
        width: 80%;

        h1 {
            margin: 0.7rem;
            font-size: 3rem;
            font-weight: 700;
            line-height: 1;
        }
    }

    .checkpoint-content-box {
        display: flex;
        width: 85%;
        gap: 1rem;

        .content {
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 1rem;

            h3 {
                margin: 0rem;
                font-size: 1.5rem;
            }

            p {
                margin-top: 0rem;
                font-size: 1rem;
                font-weight: 400;
                color: #d8d4d8;
            }
        }

        .image {
            display: flex;
            align-items: center;
        }
    }
}

@media (max-width: 1024px) {

    .reverse {
        flex-direction: column-reverse !important;
    }

    .checkpoint-banner {
        padding: 1rem;

        .banner-content h1 {
            font-size: 2.2rem;
            text-align: center;
        }

        .banner-content>p {
            font-size: 1.5rem;
            align-items: center;
        }

        .banner-content div p {
            font-size: 0.9rem;
            text-align: center;
        }

        .banner-btn {
            flex-direction: column;
            align-items: center;
        }

        .banner-btn button {
            width: 100%;
            max-width: 300px;
        }
    }

    .checkpoint-hero-image {
        margin: 2rem 0;
        padding: 0 1rem;

        img {
            width: 100%;
            height: auto;
        }
    }

    .checkpoint-page-content {
        padding: 2rem 1rem;
        gap: 3rem;

        .main-heading h1 {
            font-size: 2rem;
            text-align: center;
        }

        .checkpoint-content-box {
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

        .checkpoint-content-box .image img {
            width: 100%;
            max-width: 400px;
            height: auto;
        }

        .checkpoint-content-box .content {
            align-items: center;
            text-align: center;
        }
    }
}

@media (max-width: 480px) {
    .checkpoint-banner .banner-content h1 {
        font-size: 1.8rem;
    }

    .checkpoint-banner .banner-content>p {
        font-size: 0.5rem;
    }

    .checkpoint-banner .banner-content div p {
        font-size: 0.8rem;
    }

    .checkpoint-banner .banner-btn button {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
    }

    .main-heading {
        width: 100% !important;
    }

    .checkpoint-page-content .main-heading h1 {
        font-size: 1.8rem;
    }

    .checkpoint-content-box .content h3 {
        font-size: 1.3rem;
    }

    .checkpoint-content-box .content p {
        font-size: 0.95rem;
    }
}