/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
.section {
    padding: 3rem 0;
    min-height: 5rem;
    overflow: hidden;
}

.section-title {
    font-weight: var(--nsop-theme-title-font-weight);
    font-size: var(--nsop-theme-title-font-size);
    color: var(--nsop-theme-title-color);
    margin-bottom: 1rem;
}

._nav-item {
    display: inline-flex;
    justify-content: start;
    align-items: center;
    color: var(--nsop-theme-item-title-color);
    font-weight: 600;
    margin: 1rem;
    transition: .3s ease all;
}

    ._nav-item:hover {
        color: var(--nsop-theme-palette-secondary-dark-color);
    }

    ._nav-item ._icon {
        font-size: 1.25rem;
        margin-left: .5rem;
        display: flex;
    }

.view-all {
    display: flex;
    justify-content: center;
}

.cta-btn {
    letter-spacing: -.025rem;
    margin: 1rem auto;
    font-weight: 200;
    font-size: 1.1rem;
    display: inline-block;
    transition: 0.5s;
    text-align: center;
    border-radius: 1.5rem;
    padding: .75rem 3rem;
    color: var(--nsop-theme-button-text-color);
    background-color: var(--nsop-theme-button-backcolor);
    text-decoration: none;
    min-width: 14rem;
    line-height: 1;
    box-shadow: 0 0 1rem .5rem #ffffff1c;
    width: 100%;
    max-width: 20rem;
}

    .cta-btn:hover {
        color: var(--nsop-theme-button-text-color);
        letter-spacing: 0;
    }

@media(max-width:991px) {
    .section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: 1.9rem;
    }
}

@media(max-width:767px) {
    .section {
        padding: 1rem 0;
    }

    .section-title {
        font-size: 1.7rem;
        text-align: center;
    }
}
/*--------------------------------------------------------------
# Section Billboard
--------------------------------------------------------------*/
#SectionBillboard .carousel-caption {
    bottom: 35%;
    z-index: 2;
    right: 25%;
    left: 25%;
}

#SectionBillboard .carousel-item::after {
    position: absolute;
    content: "";
    background: rgba(24, 54, 97, 0.49);
    opacity: .7;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#SectionBillboard .carousel-caption h2 {
    margin-bottom: 2rem;
    font-size: 2.75rem;
    color: var(--nsop-theme-palette-teritary-color);
    font-weight: 850;
    text-shadow: .25rem .25rem .5rem #00000091;
    letter-spacing: -.05rem;
}

#SectionBillboard .carousel-caption p {
    animation-delay: 0.4s;
    font-size: 1.2rem;
    font-weight: 200;
    text-shadow: 0 0 .25rem #000000b5;
}

#SectionBillboard .carousel-caption a {
    animation-delay: 0.8s;
}

@media (max-width: 991px) {
    #SectionBillboard .carousel-caption {
        right: 15%;
        left: 15%;
    }
}

#SectionBillboard .carousel-item img {
    height: 75vh;
    object-fit: cover;
    position: relative;
}

@media (max-width: 767px) {
    #SectionBillboard .carousel-item img {
        height: 100vh;
    }

    #SectionBillboard .carousel-caption {
        top: 50%;
        bottom: unset;
        transform: translateY(-50%);
    }
}

/*--------------------------------------------------------------
# Section About Us
--------------------------------------------------------------*/
#SectionAboutUs {
    background-size: cover;
}

.about p {
    margin: 0;
}

.about .cta-btn {
    letter-spacing: -.025rem;
    margin: 1rem auto;
    font-weight: 200;
    font-size: 1.1rem;
    display: inline-block;
    transition: 0.5s;
    text-align: center;
    border-radius: 1.5rem;
    padding: .75rem 3rem;
    color: var(--nsop-theme-button-text-color);
    background-color: var(--nsop-theme-button-backcolor);
    text-decoration: none;
    min-width: 14rem;
    line-height: 1;
    box-shadow: 0 0 1rem .5rem #ffffff1c;
    width: 100%;
    max-width: 20rem;
}

    .about .cta-btn:hover {
        background-color: var(--nsop-theme-button-back-hover-color);
        letter-spacing: 0;
        box-shadow: 0 0 1rem .5rem #ffffff2b;
    }


/*--------------------------------------------------------------
# Section Sponsores
--------------------------------------------------------------*/
#SectionSponsores {
    background-color: var(--nsop-theme-backcolor);
}

.nsop-tg-secbrandbox-header-holder {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0;
}
/*--------------------------------------------------------------
# Section Services
--------------------------------------------------------------*/
#SectionServices {
    padding: 3rem 0;
}

.services-mobile-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    --webkit-overflow-scrolling: touch;
}

    .services-mobile-container .service-item-container {
        min-width: 18rem;
    }

.service-item-box {
    transition: all ease-in-out 0.4s;
    text-align: center;
    border: 1px solid transparent;
    padding: 1rem;
    display: flex;
}

    .service-item-box:hover {
        background-color: var(--nsop-theme-backcolor);
        border: 1px solid var(--nsop-theme-border-color);
        border-radius: .5rem;
    }

        .service-item-box:hover .item-icon {
            transform: scale(1.1);
        }

.item-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 auto 1rem;
    transition: .5s ease all;
}

.item-box-content {
    text-align: right;
}

    .item-box-content h5 {
        color: var(--nsop-theme-item-title-color, navy);
        font-weight: var(--nsop-theme-item-title-font-weight);
        transition: ease-in-out 0.3s;
        font-size: var(--nsop-theme-item-title-font-size);
    }

.service-item-box:hover h5 {
    color: var(--nsop-theme-palette-teritary-color, orange);
}

.item-box-content p {
    font-size: var(--nsop-theme-palette-secondary-dark-color);
    margin: .6rem 0 0;
    color: var(--nsop-theme-text-color, gray);
    font-weight: var(--nsop-theme-text-font-weight);
    letter-spacing: -.025rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.item-box-content .item-read-more {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin-right: .25rem;
    background-color: var(--nsop-theme-light-backcolor);
    border-radius: .75rem;
    padding: .1rem .5rem;
    min-width: 4.5rem;
    transition: all ease-in-out 0.4s;
    border: 1px transparent solid;
}

    .item-box-content .item-read-more:hover {
        border: 1px var(--nsop-theme-border-color, whitesmoke) solid;
    }

    .item-box-content .item-read-more ._text {
        font-size: .8rem;
        font-weight: 300;
        position: relative;
        top: -1px;
        display: inline;
    }

    .item-box-content .item-read-more ._icon {
        display: flex;
    }

.service-item-box:hover .item-read-more {
    background-color: var(--nsop-theme-backcolor);
    color: var(--nsop-theme-palette-primary-light-color, royalblue);
}

@media (max-width: 767px) {
    #SectionServices {
        padding: 1rem 0;
    }

    .item-box-content .item-read-more {
        color: var(--nsop-theme-palette-primary-light-color, royalblue);
        background-color: var(--nsop-theme-backcolor);
        border-radius: 1rem;
        min-width: unset;
        width: 2rem;
        height: 1rem;
        position: relative;
        top: .5rem;
        font-size: 1.1rem;
    }

        .item-box-content .item-read-more ._text {
            display: none;
        }
}

/*--------------------------------------------------------------
# Section Videos
--------------------------------------------------------------*/
#SectionVideos {
    background-color: #454446;
    overflow-x: hidden;
    padding: 3rem 0;
}

    #SectionVideos .slick-slide:hover {
        transform: none;
    }
.slick-slide {
    float: right !important;
}

.slick-prev::before, .slick-next::before {
    font-family: 'bootstrap-icons';
    font-size: 25px;
    line-height: 1;
    opacity: .75;
    color: #8095ac;
}

.slick-prev::before {
    content: '\f284';
}

.slick-next::before {
    content: '\f285';
}



.btn:focus {
    box-shadow: none;
}



.slick-next {
    background-color: inherit;
    width: 3rem;
    height: 3rem;
    right: -1rem;
}

.slick-prev {
    background-color: inherit;
    z-index: 999;
    width: 3rem;
    height: 3rem;
    left: -1rem;
}

    .slick-prev::before, .slick-next::before {
        border-radius: 50%;
        font-size: 1.25rem;
        background-color: rgba(0,0,0,.05);
        display: flex;
        width: 3rem;
        height: 3rem;
        justify-content: center;
        align-items: center;
        transition: .3s ease all;
    }

.plyr {
    border-radius: .5rem;
    margin-bottom: .5rem;
}

.plyr--video .plyr__controls {
    overflow: hidden;
}

.slick-slide img {
    border-radius: .5rem;
}

@media (max-width: 767px) {
    #SectionVideos {
        padding: 1rem 0;
    }
 .slick-prev::before, .slick-next::before {
        display: none;
    }

}

/*--------------------------------------------------------------
# Section Counter
--------------------------------------------------------------*/
#SectionCounterBox {
    background-color: var(--nsop-theme-backcolor);
    padding: 2rem 0;
}

    #SectionCounterBox .nsop-tg-seccounterbox-item-img {
        filter: hue-rotate(280deg);
    }

@media (max-width: 576px) {
    #SectionCounterBox {
        padding: 1rem 0;
    }

        #SectionCounterBox .nsop-tg-seccounterbox-item {
            margin: 1rem;
            min-width: 8rem;
        }

        #SectionCounterBox .nsop-tg-seccounterbox-item-title {
            font-size: 1rem;
        }

        #SectionCounterBox .nsop-tg-seccounterbox-num-holder {
            font-size: 1.5rem;
        }

        #SectionCounterBox .nsop-tg-seccounterbox-num-holder {
            font-size: 1.1rem;
        }
}
/*--------------------------------------------------------------
# Sections CTA
--------------------------------------------------------------*/
#SectionCallToAction {
    background: linear-gradient(rgba(25, 23, 68, 0.98), #347e95cc), url('/Images/hero-bg-04.jpg') fixed no-repeat center center;
    padding: 3rem 0;
    position: relative;
    min-height: 28rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px var(--nsop-theme-palette-border-color,#e6e6e6) solid;
    overflow-x: hidden;
}

    #SectionCallToAction .image-holder {
        display: flex;
        flex-direction: column;
        padding: 0 2rem;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        overflow: hidden;
    }

        #SectionCallToAction .image-holder img {
            width: 100%;
            max-width: 16rem;
        }

    #SectionCallToAction h2 {
        color: #fff;
        padding: 0 2rem;
    }

    #SectionCallToAction .features {
        display: flex;
        flex-wrap: wrap;
        padding: 2rem 0;
        list-style: none;
        justify-content: center;
        margin-bottom: 0;
    }

    #SectionCallToAction .features-item h3 {
        color: #fff;
        font-size: 1rem;
        font-weight: 300;
        background-color: #ffffff26;
        padding: .2rem 1.5rem;
        border-radius: .7rem;
        margin: .1rem;
        text-align: center;
    }

    #SectionCallToAction .view-all a {
        margin-top: 0;
        min-width: 15rem;
    }

@media (max-width: 991px) {
    #SectionCallToAction .image-holder {
        padding: 0;
        flex-direction: column;
        margin: 0 auto;
        align-items: center;
    }

    #SectionCallToAction .view-all a {
        margin-top: 2rem;
    }
}

@media (max-width: 767px) {
    #SectionCallToAction {
        padding: 2rem 0;
    }

        #SectionCallToAction .image-holder {
            flex-direction: column;
            width: 10rem;
            margin: 0 auto;
        }

        #SectionCallToAction h2 {
        }
}

/*--------------------------------------------------------------
# Sections Campaign
--------------------------------------------------------------*/
#SectionCampaign {
    padding: 4rem 0;
    border-top: 1px solid var(--nsop-theme-palette-LightBackcolor);
}

    #SectionCampaign .content-holder {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    #SectionCampaign .image-holder {
        height: 100%;
        border: 3px solid whitesmoke;
        border-radius: 1.25rem;
        padding: .25rem;
        max-width: 30rem;
        margin: 0 auto;
    }

    #SectionCampaign .tab-pane {
        width: 100%;
        height: 100%;
        transition: opacity 0.3s linear;
    }

        #SectionCampaign .tab-pane img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 1rem;
        }

    #SectionCampaign .content-holder .campaigns-list {
        display: inline-block;
        padding: 1rem;
    }

        #SectionCampaign .content-holder .campaigns-list .campaign-item {
            color: var(--nsop-theme-item-title-color);
            font-weight: var(--nsop-theme-item-title-font-weight);
            font-size: var(--nsop-theme-item-title-font-size);
            text-align: right;
        }

    #SectionCampaign .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: var(--nsop-theme-palette-secondary-dark-color,navy);
        background-color: #f0f0f0;
        font-weight: bold;
        border-radius: .5rem;
    }

    #SectionCampaign .view-all {
        display: flex;
        justify-content: center;
    }

    #SectionCampaign .cta-btn {
        letter-spacing: -.025rem;
        margin: 1rem auto;
        font-weight: 200;
        font-size: 1.1rem;
        display: inline-block;
        transition: 0.5s;
        text-align: center;
        border-radius: 1.5rem;
        padding: .75rem 3rem;
        color: var(--nsop-theme-button-text-color);
        background-color: var(--nsop-theme-button-backcolor);
        text-decoration: none;
        min-width: 14rem;
        line-height: 1;
        box-shadow: 0 0 1rem .5rem #ffffff1c;
        width: 100%;
        max-width: 20rem;
    }

        #SectionCampaign .cta-btn:hover {
            background-color: var(--nsop-theme-button-back-hover-color);
            letter-spacing: 0;
            box-shadow: 0 0 1rem .5rem #ffffff2b;
        }


@media (max-width: 767px) {
    #SectionCampaign {
        padding-bottom: 0;
    }

        #SectionCampaign .content-holder {
            padding: 2rem;
            text-align: center;
        }

            #SectionCampaign .content-holder .campaigns-list {
                display: inline-flex;
                padding: 1rem;
            }
}

@media (max-width: 576px) {
    #SectionCampaign .tab-pane img {
        height: 20rem;
        border-radius: 0;
    }

    #SectionCampaign {
        padding: 2rem 0;
    }
}

/*--------------------------------------------------------------
# Sections Comments
--------------------------------------------------------------*/
#SectionComments {
    width: 100%;
    min-height: 18rem;
    overflow: hidden;
    position: relative;
    background: var(--nsop-theme-palette-backcolor,whitesmoke);
    background-size: cover;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #SectionComments .carousel-inner {
        text-align: center;
        margin: 0 auto;
        max-width: 40rem;
    }

    #SectionComments img {
        width: 100px;
        border-radius: 50%;
        border: 6px solid rgba(255, 255, 255, 0.15);
        margin: 0 auto;
    }

    #SectionComments h2 {
        font-size: 1.5rem;
        font-weight: 800;
        margin: .5rem;
        letter-spacing: -.05rem;
    }

    #SectionComments h3 {
        color: #ddd;
        font-size: .9rem;
        font-weight: 200;
        margin-bottom: 1.5rem;
    }

    #SectionComments p {
        font-size: 1rem;
        font-weight: 300;
    }

.tag-items-holder ul {
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
    list-style: none;
    justify-content: start;
}

.tag-items {
    color: var(--nsop-theme-palette-primary-light-color,royalblue);
    font-size: .9rem;
    font-weight: 300;
    background-color: var(--nsop-theme-palette-backcolor-light);
    padding: .1rem 1rem;
    border-radius: .7rem;
    margin: .1rem;
    text-align: center;
    display: flex;
}

@media screen and (max-width:767px) {
    #SectionEducationCourses {
        padding: 2rem 0;
    }

        #SectionEducationCourses .course-items {
            overflow-x: auto;
            overflow-y: hidden;
            justify-content: unset;
            flex-wrap: unset;
        }

        #SectionEducationCourses .course-item {
            min-width: 7rem;
        }
}


/*--------------------------------------------------------------
# Section Contents
--------------------------------------------------------------*/
#SectionContentBox {
    background-color: var(--nsop-theme-backcolor);
    padding: 2rem 0 1rem;
}

    #SectionContentBox .nsop-tg-seccontentbox-btn a {
        letter-spacing: -.025rem;
        margin: 1rem auto;
        font-weight: 200;
        font-size: 1.1rem;
        display: inline-block;
        transition: 0.5s;
        text-align: center;
        border-radius: 1.5rem;
        padding: .75rem 3rem;
        color: var(--nsop-theme-button-text-color);
        background-color: var(--nsop-theme-button-backcolor);
        text-decoration: none;
        min-width: 14rem;
        line-height: 1;
        box-shadow: 0 0 1rem .5rem #ffffff1c;
        width: 100%;
        max-width: 18rem;
    }

        #SectionContentBox .nsop-tg-seccontentbox-btn a:hover {
            background-color: var(--nsop-theme-button-back-hover-color);
            letter-spacing: 0;
            box-shadow: 0 0 1rem .5rem #ffffff2b;
        }

    #SectionContentBox .nsop-tg-seccontentbox-item-title {
        min-height: 4rem;
        font-size: 1rem;
    }

/*--------------------------------------------------------------
# Section ContactUs
--------------------------------------------------------------*/
#SectionContactUs .cta-btn {
    letter-spacing: -.025rem;
    margin: 1rem auto;
    font-weight: 200;
    font-size: 1.1rem;
    display: inline-block;
    transition: 0.5s;
    text-align: center;
    border-radius: 1.5rem;
    padding: .75rem 3rem;
    color: var(--nsop-theme-button-text-color);
    background-color: var(--nsop-theme-button-backcolor);
    text-decoration: none;
    min-width: 14rem;
    line-height: 1;
    box-shadow: 0 0 1rem .5rem #ffffff1c;
    width: 100%;
    max-width: 18rem;
}

    #SectionContactUs .cta-btn:hover {
        background-color: var(--nsop-theme-button-back-hover-color);
        letter-spacing: 0;
        box-shadow: 0 0 1rem .5rem #ffffff2b;
    }


/*--------------------------------------------------------------
# Section Video In SecondPages
--------------------------------------------------------------*/
#SectionVideo {
    padding: 2rem 0;
}

    #SectionVideo .video-container {
        width: 66vw;
        margin: 0 auto;
        border-radius: .5rem;
        overflow: hidden;
    }

@media (max-width: 1200px) {
    #SectionVideo .video-container {
        width: 70%;
    }
}

@media (max-width: 991px) {
    #SectionVideo {
        padding: 0;
        margin: 1rem -1rem;
    }

        #SectionVideo .video-container {
            width: 100%;
            border-radius: 0;
        }
}

/*---------------------------------------------------
    Section PoweredPlatform
    -------------------------------------------------*/
#SectionPoweredPlatform {
    background: linear-gradient(rgba(13, 16, 57, 0.85), #05001a9e),url('/Images/hero-bg-07.jpg') fixed no-repeat center center;
    background-size: cover;
    padding: 4rem 0;
    overflow: hidden;
}

    #SectionPoweredPlatform .section-title {
        text-align: center;
        color: var(--nsop-theme-palette-secondary-color);
    }

    #SectionPoweredPlatform .section-subtitle {
        text-align: center;
        color: var(--nsop-theme-palette-secondary-color);
    }

    #SectionPoweredPlatform .section-desc {
        max-width: 60%;
        text-align: center;
        display: block;
        margin: 2rem auto;
        color: white;
        line-height: 2rem;
    }

    #SectionPoweredPlatform .footer-image {
        max-width: 12rem;
        display: block;
        margin: 0 auto;
        width: 100%;
        min-width: 9rem;
    }

@media screen and (max-width:767px) {
    #SectionPoweredPlatform .section-desc {
        width: 100%;
        max-width: 26rem;
    }
}

@media screen and (max-width:575px) {
    #SectionPoweredPlatform {
        padding: 4rem 0;
    }

        #SectionPoweredPlatform .section-desc {
            max-width: 20rem;
        }
}
/*--------------------------------------------------------------
# Section Limitless
--------------------------------------------------------------*/
#SectionLimitless {
    padding: 3rem 0;
    overflow-x: hidden;
}

    #SectionLimitless .page-container {
        overflow-x: hidden;
    }

#SectionHeaderBanner {
    position: relative;
}

#SectionLimitless .section-title {
    margin: 0 0 2rem;
    text-align: center;
    display: inline-block;
    position: absolute;
    bottom: 0rem;
    right: 21%;
}

    #SectionLimitless .section-title h1 {
        color: var(--nsop-theme-palette-secondary-color);
    }

    #SectionLimitless .section-title h3 {
        color: var(--nsop-theme-palette-primary-color, navy);
        margin: 0;
    }

#SectionLimitless p {
    color: var(--nsop-theme-palette-primary-color,navy);
    font-weight: 200;
    font-size: 1rem;
    letter-spacing: -.01rem;
}

#SectionLimitless .cloud-icon-holder {
    margin: 2rem 0 1rem;
    display: flex;
    align-items: end;
    justify-content: center;
}

    #SectionLimitless .cloud-icon-holder img {
        width: 12rem;
    }

#SectionLimitless .section-subtitle {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    max-width: 40rem;
    margin: 0 auto;
}

#SectionLimitless .platform-title-sep {
    font-size: .5rem;
    margin: 0 .6rem;
    color: #24b7ff;
}

#SectionLimitless .section-subtitle p {
    font-weight: 200;
    font-size: 1rem;
    color: gray;
}

#SectionLimitless .device-icon-holder {
    margin: 2rem 0 1rem;
    display: flex;
    align-items: end;
    justify-content: center;
}

    #SectionLimitless .device-icon-holder img {
        margin: 0 .25rem;
    }

#SectionLimitless .platform-icon-holder {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    #SectionLimitless .platform-icon-holder img {
        margin: 0 .33rem;
        width: 1.75rem;
    }

#SectionLimitless .platform-notify {
    font-size: .7rem;
    color: silver;
    font-weight: normal;
    text-align: center;
    margin: 2rem 0 0;
}

@media screen and (max-width:1399px) {
    #SectionLimitless .section-title {
        right: 27%;
    }
}

@media screen and (max-width:1199px) {
    #SectionHeaderBanner {
        padding-bottom: 3rem;
    }

    #SectionLimitless .section-title {
        bottom: -1rem;
        right: 16%;
    }
}

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

    #SectionLimitless {
        padding: 2rem 0;
    }

        #SectionLimitless .apps-container h1 {
            font-size: 2.2rem;
        }

        #SectionLimitless .apps-container h3 {
            font-size: 1.3rem;
            margin: 0 0 1rem;
        }

    #SectionHeaderBanner {
        padding-bottom: 0;
        margin: 0 -.75rem;
    }

    #SectionLimitless .section-title {
        position: static;
        margin: 1rem auto 0;
        display: block;
    }
}
/*--------------------------------------------------------------
# Sections CI
--------------------------------------------------------------*/
#SectionCardIntro {
    background-color: black;
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url("/Images/sectioncardback01.jpg");
    background-origin: padding-box;
    background-clip: border-box;
    background-size: cover;
    position: relative;
    min-height: 40rem;
}


    #SectionCardIntro .view-all a {
        background-color: var(--nsop-theme-button-backcolor);
        color: var(--nsop-theme-button-text-color);
        border: 0;
        opacity: .9;
    }

        #SectionCardIntro .view-all a:hover {
            background-color: var(--nsop-theme-button-back-hover-color);
        }

.cardintro-content {
    position: absolute;
    bottom: 3.5rem;
    left: 0;
    right: 0;
    padding: 0 3rem;
}

    .cardintro-content h2 {
        color: #fff;
        font-size: 2.2rem;
        font-weight: 300;
        margin: 0 0 2rem;
        text-align: center;
        letter-spacing: -.06rem;
    }

    .cardintro-content p {
        color: #fff;
        max-width: 45rem;
        margin: 1rem auto;
        font-weight: 300;
        font-size: 1.2rem;
    }



/*--------------------------------------------------------------
# Sections Counter
--------------------------------------------------------------*/
#SectionCounter {
    background-color: whitesmoke;
}

.counter-box {
    text-align: center;
}

.counter span {
    font-family: var(--nsop-theme-digit-font-family,shabnamdigit);
    font-size: 1.5rem;
    color: var(--nsop-theme-palette-primary-color, navy);
}

.counter h5 {
    font-size: 1rem;
    font-weight: 300;
    color: var(--nsop-theme-palette-primary-light-color, royalblue);
}

@media (max-width: 992px) {
    #SectionCounter {
        padding: 3rem 7px;
    }

    .counter-box {
        margin-bottom: 1.5rem;
    }
}



/*--------------------------------------------------------------
# Sections FAQ
--------------------------------------------------------------*/
#SectionFAQ {
    background-color: white;
}

    #SectionFAQ ._title {
        margin: 0 0 2rem;
        text-align: center;
    }

.questions h2 {
    color: var(--nsop-theme-title-color, darkblue);
    font-size: var(--nsop-theme-title-font-size);
    font-weight: var(--nsop-theme-title-font-weight);
    text-align: right;
}


#SectionFAQ {
}

    #SectionFAQ .examtest-box {
        background: var(--nsop-theme-backcolor);
        padding: 1.5rem;
        margin-bottom: .5rem;
        border-radius: .5rem;
    }

    #SectionFAQ .examtest-text {
        color: var(--nsop-theme-item-title-color);
        font-weight: 600;
        font-size: 1rem;
    }

    #SectionFAQ .answer-text {
        font-size: var(--nsop-theme-text-font-size);
        font-weight: var(--nsop-theme-text-font-weight);
        color: var(--nsop-theme-text-color);
        text-align: right;
    }



    #SectionFAQ .view-all a {
        font-weight: 200;
        font-size: 1rem;
        display: inline-block;
        padding: .5rem 2.2rem;
        border-radius: 3rem;
        transition: 0.5s;
        margin-top: 2rem;
        border: 1px solid var(--nsop-theme-backcolor);
        background-color: var(--nsop-theme-backcolor);
        color: var(--nsop-theme-palette-primary-color);
        min-width: 18rem;
        text-align: center;
        letter-spacing: -.03rem;
    }

        #SectionFAQ .view-all a:hover {
            background-color: var(--nsop-theme-palette-primary-light-color);
            border: 1px solid var(--nsop-theme-palette-primary-light-color);
            color: white;
            letter-spacing: .02rem;
        }



@media (max-width: 767px) {
    #SectionFAQ .view-all a {
        background-color: var(--nsop-theme-palette-primary-light-color);
        border: 1px solid var(--nsop-theme-palette-primary-light-color);
        color: white;
        letter-spacing: .02rem;
        width: 100%;
        max-width: 20rem;
        text-align: center;
        padding: .4rem 2.2rem;
    }
}


/*--------------------------------------------------------------
# Sections Mag
--------------------------------------------------------------*/

#SectionMagazine {
    background: var(--nsop-theme-light-backcolor, whitesmoke);
    padding: 0 0 2rem;
}


    #SectionMagazine .view-all a {
        font-weight: 200;
        font-size: 1rem;
        display: inline-block;
        padding: .5rem 2.2rem;
        border-radius: 3rem;
        transition: 0.5s;
        margin-top: 2rem;
        border: 1px solid var(--nsop-theme-backcolor);
        background-color: white;
        color: var(--nsop-theme-palette-primary-color);
        min-width: 18rem;
        text-align: center;
        letter-spacing: -.03rem;
    }

        #SectionMagazine .view-all a:hover {
            background-color: var(--nsop-theme-palette-primary-light-color);
            border: 1px solid var(--nsop-theme-palette-primary-light-color);
            color: white;
            letter-spacing: .02rem;
        }

@media (max-width: 767px) {
    #SectionMagazine {
        padding: 2rem 0;
    }

    .magazine h3 {
        margin-bottom: 1rem;
    }

    #SectionMagazine .view-all a {
        background-color: var(--nsop-theme-palette-primary-light-color);
        border: 1px solid var(--nsop-theme-palette-primary-light-color);
        color: white;
        letter-spacing: .02rem;
        width: 100%;
        max-width: 20rem;
        text-align: center;
        padding: .4rem 2.2rem;
    }
}


/*--------------------------------------------------------------
# Sections Credits
--------------------------------------------------------------*/
#Credits {
}

.credits-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
}

.credit-item {
    min-width: 8rem;
    justify-content: center;
    align-items: center;
    display: flex;
}

@media screen and (max-width:767px) {
    .credits-container {
        justify-content: start;
    }
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/


.main-container {
    margin-top: 1rem;
}

.content-container img {
    width: 100%;
    margin-bottom: 1rem;
}

.content-container h3 {
    font-size: 2rem;
    margin: 1rem 0 1rem;
    color: var(--nsop-theme-title-color, darkblue);
}

.content-container .top-info {
    margin-bottom: .5rem;
    padding: 0 1rem;
    align-items: baseline;
}

    .content-container .top-info i {
        font-size: 1.3rem;
        color: #0f6097;
    }

    .content-container .top-info a {
        font-size: 1.5rem;
        margin-right: 1rem;
        color: #0f6097;
    }

.content-container .descriotion-content p {
    text-align: justify;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #5b5959;
}

.content-container .tags-holder {
    margin: 2rem 0 1rem;
}

    .content-container .tags-holder .tag-item {
        color: #4f6ca2;
        border-radius: 1.5rem;
        padding: .3rem 1rem;
        min-width: 4rem;
        background: aliceblue;
        margin: .5rem .1rem;
        transition: .3s ease all;
        border: 1px solid transparent;
    }

        .content-container .tags-holder .tag-item:hover {
            font-weight: 500;
            border: 1px solid #cbdff0;
        }

.content-container .text-info-box .text-info-item {
    margin: 1rem;
}

    .content-container .text-info-box .text-info-item span {
        font-size: .9rem;
        color: #42577e;
        font-weight: 400;
    }

    .content-container .text-info-box .text-info-item i {
        margin-left: 0.5rem;
        font-size: 1.3rem;
        position: relative;
        top: .3rem;
        opacity: .5;
        color: #2b72a2;
    }






/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

.header {
    border-bottom: 1px silver solid;
    margin-bottom: 1rem;
}

    .header h5 {
        display: inline-block;
        border-bottom: 3px var(--nsop-theme-palette-secondary-color) solid;
        color: var(--nsop-theme-title-color, darkblue);
        margin-bottom: 0;
        font-size: 1.1rem;
        padding: .5rem;
    }

.view-all {
    display: flex;
    justify-content: center;
}

    .view-all a {
        background-color: var(--nsop-theme-button-backcolor);
        color: var(--nsop-theme-button-text-color);
        font-weight: 200;
        font-size: 1rem;
        display: inline-block;
        padding: .5rem 2.2rem;
        border-radius: 3rem;
        transition: 0.5s;
        margin: 2rem .125rem 0;
        min-width: 18rem;
        text-align: center;
        letter-spacing: -.03rem;
    }

        .view-all a:hover {
            background-color: var(--nsop-theme-button-back-hover-color);
            color: white;
            letter-spacing: .02rem;
        }

    .view-all .dimmed-btn {
        background-color: inherit;
        color: var(--nsop-theme-text-color);
        background-color: #b5c1db8a;
    }

        .view-all .dimmed-btn:hover {
            background-color: var(--nsop-theme-palette-primary-light-color);
            color: white;
            letter-spacing: .02rem;
        }

@media (max-width: 767px) {
    .view-all {
        flex-direction: column;
    }

        .view-all a {
            letter-spacing: .02rem;
            width: 100%;
            max-width: 18rem;
            text-align: center;
            padding: .4rem 2.2rem;
            margin: .25rem auto;
            font-size: 1rem;
        }
}
/*--------------------------------------------------------------
# Sections Comments
--------------------------------------------------------------*/
.comments-container {
    margin: 2rem 0;
}

    .comments-container .header span {
        font-size: 1.1rem;
        margin: 2rem;
        font-weight: 500;
        color: #0f6097;
    }

.commenet-expander {
    color: #0f6097;
    font-weight: 500;
    background: aliceblue;
    padding: .7rem 3rem;
    border-radius: 1.5rem;
}


    .commenet-expander::after {
        font-family: bootstrap-icons;
        width: 1.25em;
        line-height: 0;
        content: "\f282";
        transform-origin: .5em 50%;
        top: .3rem;
        position: relative;
        right: .2rem;
        display: inline-block;
        transition: .5s ease all;
        font-size: 1.1rem;
    }

    .commenet-expander[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }


.comments-container .comment-box {
    margin: 1rem 0;
}

.comments-container .person-info .personal-img {
    width: 3rem;
    background-color: aliceblue;
    border-radius: 50%;
}

.comments-container .person-info span {
    align-self: center;
    margin-right: 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: #56698c;
}

.comments-container .person-info .date {
    font-weight: 200;
    color: #7d7a7a;
    font-size: .9rem;
}

.comments-container .comment-box p {
    margin-top: .5rem;
    color: #444343;
}

.input-comment-box .form-group {
    margin-bottom: 1.2rem;
    padding: 0 2rem;
}

.input-comment-box label {
    padding-bottom: .5rem;
    color: #666666;
    font-weight: 500;
}

.input-comment-box input {
    height: 2.7rem;
}

.send-message-btn {
    font-weight: 800;
    font-size: 1rem;
    display: inline-block;
    padding: .4rem 2rem;
    border-radius: .5rem;
    margin: 0 0 1rem;
    border: 2px solid #0f6097;
    color: var(--nsop-theme-title-color, darkblue);
    background: #fff;
    width: 100%;
    max-width: 15rem;
    transition: .3s;
}

    .send-message-btn:hover {
        background: #ffc71e;
        border-color: #ffc71e;
    }

.enter-alert-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
}

    .enter-alert-box .btn-group {
        border: 2px solid whitesmoke;
        border-radius: 1.5rem;
        background: aliceblue;
        max-width: 15rem;
        width: 100%;
        overflow: hidden;
    }

        .enter-alert-box .btn-group .btn {
            color: #0f6097;
            font-weight: 500;
            font-size: 1rem;
            padding: .2rem 0 .2rem .5rem;
            font-size: .9rem;
        }

            .enter-alert-box .btn-group .btn:hover {
                box-shadow: none;
                font-weight: 800;
                color: var(--nsop-theme-title-color, darkblue);
            }

        .enter-alert-box .btn-group i {
            padding: .5rem;
            font-size: 1.2rem;
            position: relative;
            top: 2px;
        }

        .enter-alert-box .btn-group span {
            position: relative;
            bottom: 2px;
        }

.input-comment-box a {
    color: #41577e;
}

    .input-comment-box a:hover {
        color: var(--nsop-theme-palette-secondary-color);
    }




/*--------------------------------------------------------------
# Sections SideBar
--------------------------------------------------------------*/

.widgets-container {
    top: 5rem;
    margin-bottom: 3rem;
}

#WidgetLink ul {
    list-style: none;
    padding: 0;
}

    #WidgetLink ul li {
        margin-bottom: .5rem;
    }

    #WidgetLink ul a {
        color: #4f6ca2;
        font-size: 1rem;
        font-weight: 500;
    }



#WidgetLast .contentlist-item-container {
    display: block;
    transition: .5s;
    padding: .5rem;
}

    #WidgetLast .contentlist-item-container:hover {
        background-color: aliceblue;
    }

    #WidgetLast .contentlist-item-container .contentlist-descriotion-holder {
        display: flex;
        flex-direction: column;
        height: 5rem;
        justify-content: space-between;
    }

    #WidgetLast .contentlist-item-container .contentlist-image-holder {
        background-color: aliceblue;
        background-image: url('/Images/xpost-img1.jpg.pagespeed.ic.UeMlV6U-bS.jpg');
        background-size: cover;
        background-position: center center;
        border-radius: .25rem;
    }

    #WidgetLast .contentlist-item-container h3 {
        font-size: .9rem;
        font-weight: 400;
        margin-bottom: 0;
        color: var(--nsop-theme-title-color, darkblue);
    }

    #WidgetLast .contentlist-item-container span {
        color: dimgray;
        font-size: .8rem;
    }

    #WidgetLast .contentlist-item-container .go-on {
        float: left;
        color: #0f6097;
        font-weight: 500;
    }

        #WidgetLast .contentlist-item-container .go-on:hover {
            font-weight: 800;
        }

@media (max-width:767px) {
    #WidgetLast .contentlist-item-container .go-on {
        font-weight: 800;
    }
}

/*--------------------------------------------------------------
# MagItems Page
--------------------------------------------------------------*/

.filter-subjects-holder {
    padding: 1rem;
}

    .filter-subjects-holder .search-box-holder {
        padding: .5rem;
        background-color: white;
        border: 1px #a4b6d2 solid;
        border-radius: 1.5rem;
        display: inline-block;
        transition: all 0.5s ease;
        width: 100%;
        position: relative;
    }

        .filter-subjects-holder .search-box-holder:hover {
            box-shadow: 0 0 0.3em rgba(86, 121, 204, 0.7);
        }

        .filter-subjects-holder .search-box-holder .search-box {
            border: 0;
            line-height: 1;
            color: #626a7d;
            transition: all 0.5s ease;
            outline: none;
            width: 100%;
            padding-left: 2rem;
        }

    .filter-subjects-holder .btn-search {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }

        .filter-subjects-holder .btn-search i {
            color: #4f6388;
            font-size: 1.1rem;
            position: relative;
            top: .05rem;
        }

    .filter-subjects-holder .toolbar-holder {
        background: aliceblue;
        border-radius: 1.5rem;
        padding: 0.2rem;
        width: 100%;
        max-width: 33rem;
        justify-content: center;
    }

    .filter-subjects-holder .btn-subject {
        color: #233c6a;
        border-radius: 1.5rem;
        padding: .3rem 1rem;
        min-width: 4rem;
    }

        .filter-subjects-holder .btn-subject:hover {
            background: #dcdcdc;
        }

        .filter-subjects-holder .btn-subject:focus {
            box-shadow: none;
            background-color: #fff;
            font-weight: 500;
        }


.mag-items-container .mag-item {
    padding: 1rem;
    display: block;
    transition: .5s;
}

    .mag-items-container .mag-item:hover {
        background-color: whitesmoke;
    }

    .mag-items-container .mag-item .image-holder {
        background-color: whitesmoke;
        background-image: url('/Images/xpost-img1.jpg.pagespeed.ic.UeMlV6U-bS.jpg');
        background-size: cover;
        background-position: center center;
        border-radius: .25rem;
    }

    .mag-items-container .mag-item h3 {
        font-size: 1rem;
        font-weight: 500;
        color: var(--nsop-theme-title-color, darkblue);
        margin: 1rem 0 .5rem;
    }

    .mag-items-container .mag-item p {
        color: #333335;
        margin-bottom: 1rem;
        display: block;
        text-overflow: ellipsis;
        word-wrap: break-word;
        overflow: hidden;
        max-height: 3.2em;
        line-height: 1.6em;
        text-align: justify;
    }

    .mag-items-container .mag-item span {
        color: #55698c;
    }

    .mag-items-container .mag-item .go-on {
        float: left;
    }

        .mag-items-container .mag-item .go-on:hover {
            font-weight: 800;
        }

.mag-items-container .pagination-bar {
    margin-top: 1rem;
}

    .mag-items-container .pagination-bar a {
        color: var(--nsop-theme-title-color, darkblue);
    }


@media (max-width:767px) {
    .filter-subjects-holder .toolbar-holder {
        margin-top: .5rem;
    }
}

/*--------------------------------------------------------------
# Second Page FQ
--------------------------------------------------------------*/

#SectionQuestion {
    background-color: white;
}


    #SectionQuestion .accordion-item span {
        padding-left: 1rem;
        font-size: 1.2rem;
        font-weight: 500;
        color: var(--nsop-theme-palette-secondary-color);
    }

    #SectionQuestion .accordion-item {
        margin: .3rem 0;
        border: 1px var(--nsop-theme-backcolor, whitesmoke) solid;
        border-radius: .5rem;
        transition: .5s ease all;
        background-color: white;
    }

        #SectionQuestion .accordion-item:hover {
            background-color: var(--nsop-theme-backcolor, whitesmoke);
        }

    #SectionQuestion .accordion-button {
        background-color: #fff;
        padding: 1rem 1.25rem;
        color: var(--nsop-theme-title-color, darkblue);
        border-bottom: 0;
        line-height: 1.4rem;
        border-radius: .5rem;
    }

        #SectionQuestion .accordion-button:hover {
            color: var(--nsop-theme-palette-teritary-color, royalblue);
        }

        #SectionQuestion .accordion-button:focus {
            z-index: 3;
            border: 0;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(174, 164, 202, 0.25);
        }

        #SectionQuestion .accordion-button:not(.collapsed) {
            color: var(--nsop-theme-title-color, darkblue);
        }


/*CUSTOMIZE*/
.offcanvas-backdrop.show {
    opacity: 1;
}

.offcanvas-backdrop {
    background-color: #0000006b;
    backdrop-filter: blur(4px);
}