/* .nav .navbar-light .navbar-nav .nav-link {
    padding: 22px 10px;
} */

.pagination {
    gap: 5px;
}
.margin-20 {
    margin-left: -20px;
}
.whitespace-nowrap {
    white-space: nowrap !important;
}

.dashboard .side-nav {
    height: auto !important;
}

.user-Qualification > ul > li::before {
    background: #fffff7 !important;
}

/* video-modal */
.video-modal .modal-dialog {
    max-width: 800px;
    margin: auto;
}

.video-modal .modal-content {
    border-radius: 1rem;
}

.video-modal .modal-body {
    padding: 0;
}

.video-modal .embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}

.video-modal .embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* .section-bg-default-color {
    background-color: #F5F7F9;
} */

/* end video-modal */
.box-style i {
    /* width: 20px; */
    display: inline-block;
}
.tx-pr i {
    transition: transform 0.3s ease;
}
.tx-pr:hover i {
    transform: translateX(3px);
}

/* Hero banner (style1/style2) bleeds/cuts off on phones and tablets:
   style.css's 768px breakpoint pushes .slide-image right: -8.5rem
   (sized for tablet only), and its 991px breakpoint fixes the img to
   a flat 300px width while the container stays side-by-side (no wrap),
   so on narrower tablets text + image don't fit and the image is
   clipped. Stack them and scale the image on phones and tablets alike. */
@media only screen and (max-width: 991px) {
    .slide .container {
        flex-direction: column;
    }
    .slide .container .slide-info {
        width: 100%;
    }
    .slide .container .slide-image {
        position: relative;
        right: 0;
        left: 0;
        top: 0;
        width: 70%;
        height: auto;
        margin: 1.5rem auto 0;
    }
    .slide .container .slide-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}