@media (max-width: 768px) {
    body {
        line-height: 1.6;
    }

    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        padding: 5px 0px;
    }

    .display-mobile {
        display: flex;
    }

    .display-desktop {
        display: none;
    }

    .pLarge {
        font-size: 100% !important;
    }

    .pMedium {
        font-size: 95% !important;
    }

    .pSmall {
        font-size: 85% !important;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.15rem 0.35rem;
    }

    .popup-box-document {
        margin-left: 3px;
        font-size: 90%;
    }

    .form-group {
        margin-bottom: 5px !important;
    }

    .form-control, .form-select {
        font-size: 90%;
    }

    .card .card-header {
        font-size: 100%;
    }

        .card .card-header.card-header-small {
            font-size: 85%;
        }

    .grid-view th {
        padding: 3px;
        font-size: 75%;
    }

    .grid-view td {
        padding: 3px;
        font-size: 75%;
    }

    .sub-heading {
        font-size: 90%;
    }

    .control-label {
        font-size: 90%;
    }

    .alert p {
        font-size: 90%;
    }

    .modal .modal-header h6 {
        font-size: 100%;
    }

    .modal .modal-header h5 {
        font-size: 100%;
    }

    .contact-list .contact-text {
        font-size: 90%;
    }

        .contact-list .contact-text.place {
            margin-left: 13px;
        }

        .contact-list .contact-text.place1 {
            margin-left: 28px;
        }

        .contact-list .contact-text.phone {
            margin-left: 9px;
        }

        .contact-list .contact-text.gmail {
            margin-left: 6px;
        }

    .radio-button-list {
        font-size: 90%;
    }

        .radio-button-list.radio-button-list-small {
            width: 50%;
            margin-top: -10px;
            margin-bottom: 10px;
        }

        .radio-button-list.radio-button-list-small-2 {
            width: 50%;
            margin-bottom: 10px;
        }

        .radio-button-list.radio-button-list-small-3 {
            width: 50%;
            margin-bottom: 10px;
        }

    input[type="checkbox"] {
        transform: scale(1.5);
    }

    input[type="radio"] {
        transform: scale(1.5);
    }

    .user-profile h6 {
        font-size: 80%;
    }

    .user-img {
        width: 25px;
    }

    .dropdown-menu {
        min-width: 5rem;
    }

    .h6, h6 {
        font-size: 14px;
    }

    .user-details {
        font-size: 85%;
    }

        .user-details .alert {
            min-width: 40%;
        }

    .dashboard-card .card-header {
        font-size: 100%;
    }

    .dashboard-card .card-body {
        padding: 10px;
        font-size: 90%;
    }

    .custom-label {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 5px;
        text-align: left;
    }

    /* ============ Website Top Header Start ============ */

    .common-wrapper .container.common-container.four_content {
        max-width: 100%;
        width: 100% !important;
        padding: 0;
        height: auto;
    }

    .four_content .common-left {
        width: 100%;
        float: none;
        display: inline-block;
        text-align: center;
        border-bottom: 1px solid var(--border-color-top-header);
    }

        .four_content .common-left ul {
            display: inline-block;
            max-height: 36px;
        }

    .four_content .common-right {
        float: none;
        position: relative;
        width: 100%;
        clear: both;
        margin-top: 0px;
        text-align: center;
        font-size: 100%;
    }

        .four_content .common-right ul {
            display: inline-block;
            max-height: 36px;
        }

    /* ============ Website Top Header End ============ */

    /* ============ Website Header Start ============ */

    .website-logo {
        width: 40px;
        height: 40px;
    }

    .website-title-big {
        font-size: 100%;
    }

    .website-title-medium {
        font-size: 85%;
    }

    .website-title-small {
        font-size: 80%;
        margin-top: 1px;
    }

    /* ============ Website Header End ============ */

    /* ============ Website Top Menu Start ============ */

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link {
        font-size: 100%;
    }

    .btn-signin {
        width: 90px;
        padding-left: 30px;
        font-size: 90%;
    }

    .btn-signin-registration-closed {
        width: 90px;
        padding-left: 0px;
        font-size: 90%;
    }

    .btn-signup {
        width: 125px;
        margin-right: -30px;
        font-size: 90%;
    }

    .btn-signout {
        margin: 5px;
        font-size: 85%;
    }

    .dropdown-item {
        padding: 0.2rem 0.4rem;
        font-size: 80%;
    }

    /* ============ Website Top Menu End ============ */
    /* ============ Website Footer Start ============ */
    .footer-list-top > li {
        padding-left: 0.5rem;
    }

    .footer-list-top1 {
        width: 100%;
    }

        .footer-list-top1 > li {
            padding-left: 0.5rem;
        }

    .footer-list-top2 {
        width: 100%;
    }

        .footer-list-top2 > li {
            padding-left: 0.5rem;
        }

    .footer-list-top3 {
        width: 100%;
    }

        .footer-list-top3 > li {
            padding-left: 0.5rem;
        }

    .footer-list-header {
        font-size: 95%;
    }

    .footer-list-anchor {
        font-size: 85%;
    }

    .footer-photo-gallery-img {
        padding: 3px;
        width: 15%;
    }

    .footer-social-section {
        justify-content: center;
    }

        .footer-social-section::after {
            top: 25%;
        }

    .footer-social-overlap {
        display: flex;
        justify-content: center;
    }

        .footer-social-overlap > a {
            margin: auto;
            font-size: 150%;
        }

            .footer-social-overlap > a:not(:first-child) {
                margin-left: 0;
            }

    .footer-social-connect {
        margin-bottom: 10px;
        padding: 0 10px;
        font-size: 95%;
    }

    .footer-social-small {
        font-size: 75%;
    }

    .footer-social-icons-wrapper {
        width: 100%;
        padding: 0;
    }

    .footer-bottom-section {
        padding: 5px 5px 10px 5px;
    }

    .footer-bottom-wrapper {
        text-align: center;
        width: 100%;
        font-size: 80%;
    }

    .footer-bottom-rights {
        display: block;
    }

    /* ============ Website Footer End ============ */

    /* ============ Website Scroll Start ============ */

    .website-scroll {
        width: 35px;
        height: 35px;
    }

    /* ============ Website Scroll End ============ */

    /* ============ Website Announcement Start ============ */

    .announcement {
        min-height: 30px;
        font-size: 90%;
    }

        .announcement marquee {
            top: 3px;
        }

    .btn-announcement {
        padding: 4px 10px;
        font-size: 135%;
    }

    .marquee li {
        padding-top: 3px;
        font-size: 70%;
    }

    .marquee-sibling {
        padding: 3px 10px;
    }

    .pause-marquee {
        font-size: 150%;
    }

    .play-marquee {
        font-size: 150%;
    }

    #vertical-marquee {
        height: 200px;
    }

    /* ============ Website Announcement End ============ */

    /* ============ Website Minister Profile Start ============ */

    .minister-profile-container {
        min-height: 100px;
    }

    .minister-photo {
        width: 90px;
        height: 90px;
        margin-top: 5px;
    }

    .minister-profile-container.director-message {
        width: 100%;
    }

    /* ============ Website Minister Profile End ============ */

    /* ============ Login Box Start ============ */

    .login-container .login-title {
        font-size: 100%;
    }

    .login-container .login-body {
        margin-top: 2rem !important;
        margin-left: 20px;
        margin-right: 20px;
    }

    /* ============ Login Box End ============ */

    /* ============ Notifications Display Start ============ */

    .resp-tabs-list li {
        padding: 5px 10px;
    }

    .page-tab ul.resp-tabs-list li {
        font-size: 90%;
    }

    .date-list .date span {
        font-size: 80%;
    }

    .date-list .date em {
        padding: 5px 5px;
        font-size: 80%;
    }

    .resp-tab-content {
        padding: 10px 0px;
    }

    ul.content_list.date-list {
        padding: 0px 10px;
    }

    .resp-tabs-container ul.content_list li.list-content {
        font-size: 90%;
    }

    .resp-tabs-container ul.content_list li .list-content {
        font-size: 90%;
    }

    #tabAccordion .accordion-button {
        padding: 0.5rem 0.5rem;
        font-size: 120% !important;
    }

    .notifications-container ul.notification-list li.list-content {
        font-size: 100%;
    }

    .notifications-container ul.notification-list li .list-content {
        font-size: 100%;
    }

    /* ============ Notifications Display End ============ */

    /* ============ Application Form Start ============ */

    #accordionApplicationForm .accordion-button {
        padding: 0.5rem 0.5rem;
        font-size: 120% !important;
    }

    .custom-label-left {
        width: 50%;
    }

    .custom-label-right {
        width: 50%;
        padding-left: 5px;
    }

    /* ============ Application Form End ============ */

    /* ============ Website Carousel Start ============ */

    .carousel-inner .carousel-item > div {
        display: none;
    }

        .carousel-inner .carousel-item > div:first-child {
            display: block;
        }


    .carousel-control-next, .carousel-control-prev {
        width: 15%;
    }

    .carousel-item .col-md-2 {
        width: 100% !important;
    }

    .carousel-control-next .fa-3x, .carousel-control-prev .fa-3x {
        font-size: 2em;
    }

    #photo-gallary.carousel {
        height: 200px;
    }

        #photo-gallary.carousel .carousel-item {
            height: 165px;
        }

    #video-gallary.carousel {
        height: 200px;
    }

        #video-gallary.carousel .carousel-item {
            height: 165px;
        }


    /* ============ Website Carousel End ============ */
}

@media (min-width: 769px) {
    .display-mobile {
        display: none;
    }

    .display-desktop {
        display: flex;
    }

    /* ============ Website Carousel Start ============ */

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next,
    .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(17%) !important;
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-item-prev:not(.carousel-item-end),
    .active.carousel-item-start,
    .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-17%) !important;
    }

    .carousel-item-next.carousel-item-start, .active.carousel-item-end {
        transform: translateX(0) !important;
    }

    .carousel-inner .carousel-item-prev,
    .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-17%) !important;
    }

    /* ============ Website Carousel End ============ */
}