body {
    font-family: "Montserrat", sans-serif;
    background: #152135;
}

.sipner-img {
    animation: spin 90s linear infinite;
    width: 90%;
    height: 98%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(100deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.banner-man-image {
    top: -0;
    max-width: 400px;
}

/* service */

.service-card:hover .service-shape {
    transform: scale(1);
    transition: all .5s ease-in-out;
}

.service-card:hover .service-shape {
    color: rgb(14, 111, 196);
    transform: rotateY(360deg);
}

/* achievement */

.achievement-shape:hover .achievement-icon {
    transform: scale(1);
    transition: all .5s ease-in-out;
}

.achievement-shape:hover .achievement-icon {
    color: rgb(14, 111, 196);
    transform: rotateY(360deg);
}

/* swiperjs btn */

.service-nav {
    height: 55px !important;
    width: 55px !important;
    border-radius: 50%;
    background-color: rgb(167, 237, 237);
}

.service-nav::after {
    font-size: 20px !important;
    color: white !important;
}

/* tablet device */

@media screen and (max-width: 992px) {

    .banner-man-image {
        top: -70px;
        max-width: 300px;
    }

    /* banner */
    .about-man-image {
        top: 40px;
        max-width: 300px;
    }

    .sipner-img {
        animation: spin 90s linear infinite;
        width: 60%;
        height: 68%;
    }

}


/* mobile device */


@media screen and (max-width: 576px) {

    /* banner */
    .banner-man-image {
        top: -80px;
        max-width: 215px;
    }

    .sipner-img {
        animation: spin 90s linear infinite;
        width: 200px;
        height: 60%;
    }

    .service-card:hover .service-shape {
        transform: scale(1);
        transition: all .5s ease-in-out;
    }

    .service-card:hover .service-shape {
        color: rgb(14, 111, 196);
        transform: rotateX(360deg);
    }

    /* achievement */

    .achievement-shape:hover .achievement-icon {
        transform: scale(1);
        transition: all .5s ease-in-out;
    }

    .achievement-shape:hover .achievement-icon {
        color: rgb(14, 111, 196);
        transform: rotateY(360deg);
    }

    /* swiperjs btn */

    .service-nav {
        height: 40px !important;
        width: 40px !important;
        border-radius: 50%;
        background-color: rgb(167, 237, 237);
    }

    .service-nav::after {
        font-size: 16px !important;
        color: white !important;
    }

}