/* ======== Global Styling ======== */
@media screen and (max-width: 992px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 990px;
    }
}

@media screen and (max-width: 991px) {
    h1 {
        font-size: 65px;
        line-height: 85px;
    }

    h2 {
        font-size: 40px;
        line-height: 45px;
    }

    h3 {
        font-size: 30px;
        line-height: 40px;
    }

    h4 {
        font-size: 24px;
        line-height: 34px;
    }

    h5 {
        font-size: 16px;
        line-height: 22px;
    }

    h6 {
        font-size: 14px;
        line-height: 20px;
    }

    p {
        font-size: 14px;
        line-height: 20px;
    }

    .hover1 {
        font-size: 14px;
        line-height: 20px;
        padding: 14px 24px;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 38px;
        line-height: 54px;
    }

    h2 {
        font-size: 30px;
        line-height: 40px;
    }

    h3 {
        font-size: 26px;
        line-height: 36px;
    }

    h4 {
        font-size: 20px;
        line-height: 30px;
    }

    h5 {
        font-size: 16px;
        line-height: 22px;
    }

    h6 {
        font-size: 14px;
        line-height: 20px;
    }

    p {
        font-size: 14px;
        line-height: 20px;
    }

    a {
        font-size: 14px;
        line-height: 20px;
    }

    button {
        font-size: 14px;
        line-height: 20px;
    }

}

/* ======== End of Global Styling ======== */
/* ======== 1.1. Header Section ======== */

@media screen and (max-width: 991px) {
    header .container {
        padding: 25px 12px;
        border-bottom: 1px solid #363636;
    }
}

/* ======== End of 1.1. Header Section ======== */
/* ======== 1.2. Hero Section ======== */

@media screen and (max-width: 991px) {
    .Hero {
        padding: 70px 0px;
    }

    .Hero img {
        width: 280px;
    }
}

@media screen and (max-width: 767px) {
    .Hero {
        padding: 50px 0px;
    }

    .Hero img {
        width: 250px;
    }
}

/* ======== End of 1.2. Hero Section ======== */
/* ======== 1.3. Steps Section ======== */
@media screen and (max-width: 1399px) {
    .Steps .position-absolute {
        font-size: 100px;
        right: 15%;
    }
}

@media screen and (max-width: 1199px) {
    .Steps .position-absolute {
        font-size: 90px;
        right: 0%;
    }

    .Spin img[alt="arrow"] {
        width: 60px;
    }
}

@media screen and (max-width: 991px) {
    .Steps .position-absolute {
        font-size: 80px;
        bottom: 5%;
    }

    .Steps figure {
        width: 55px;
        height: 55px;
    }

    .Steps figure img {
        width: 30px;
    }

    .Steps .gap-2 {
        padding: 15px;
    }
}

@media screen and (max-width: 767px) {
    .Steps .gap-2 {
        border-left: 0px;
        border-bottom: 1.3px solid #555555;
    }
}

/* ======== End of 1.3. Steps Section ======== */
/* ===== 04. SocialLinks Section ===== */

@media screen and (max-width: 991px) {
    .SocialLinks {
        padding: 70px 0px;
    }
}

@media screen and (max-width: 767px) {
    .SocialLinks {
        padding: 50px 0px;
    }
}

/* ===== End of 04. SocialLinks Style ===== */
/* ===== 05. Spin Style ===== */
@media screen and (max-width: 1399px) {
    .Spin .position-absolute {
        left: 0%;
    }
}

@media screen and (max-width: 1199px) {
    .Spin .position-relative .position-relative {
        width: 50%;
    }

    .Spin .container button {
        width: 95px;
        height: 95px;
        font-size: 20px;
        top: 40%;
        left: 40%;
    }

    .Spin .position-absolute {
        top: 20%;
        scale: 0.8;
    }
}

@media screen and (max-width: 991px) {
    .Spin .container button {
        width: 85px;
        height: 85px;
        font-size: 18px;
        top: 38%;
        left: 38%;
    }

    .Spin img[alt="arrow"] {
        width: 45px;
    }
}

@media screen and (max-width: 767px) {
    .Spin .position-absolute {
        display: none;
    }

    .Spin .position-relative .position-relative {
        width: 100%;
    }
}

@media screen and (max-width: 540px) {
    .Spin .container button {
        top: 41%;
        left: 41%;
    }
}

@media screen and (max-width: 480px) {
    .Spin .container button {
        font-size: 16px;
        top: 40%;
        left: 40%;
    }
}

@media screen and (max-width: 391px) {
    .Spin .container button {
        top: 38%;
        left: 38%;
    }
}

@media screen and (max-width: 375px) {
    .Spin .container button {
        top: 38%;
        left: 38%;
    }
}

@media screen and (max-width: 360px) {
    .Spin .container button {
        width: 70px;
        height: 70px;
    }
}

@media screen and (max-width: 320px) {
    .Spin .container button {
        top: 38%;
        left: 38%;
    }
}

/* ===== End of 05. Spin Style ===== */
/* ===== 07. Models Style ===== */

@media screen and (max-width: 1199px) {
    .modal-dialog {
        max-width: 700px;
    }

    #resultModal .modal-content h4 {
        width: 57%;
    }
}

@media screen and (max-width: 991px) {
    #resultModal button {
        color: #ffffff;
        margin: 15px;
        font-size: 20px;
    }

    .modal-content {
        transform: translate(-50%, 15%);
    }

    .modal-dialog {
        max-width: 90%;
    }

    #resultModal .modal-content h4 {
        width: 87%;
    }
}

@media screen and (max-width: 767px) {
    .modal-body {
        padding: 40px 20px;
    }
}

/* ===== End of 07. Models Style ===== */