/* ------------------------------------ Responsive CSS Start -------------------------------------- */
header.main-header {
    z-index: 1000;
}
.megamenu-box .dropdown-item {
    white-space: unset !important;
    word-break: break-word;
}
.our-history-list ul li{
    padding-right: 65px;
}
.team-block .inner-box:hover .content-box .sub-title a{
    color:#fff;
}
.acc-wrapper {
    z-index: 1000;
}
@media(min-width:768px){
.social-media {
    width: 50px;
    transition:1s;
}
.social-media:hover {
    width: 200px;   
}
.social-media a{
    white-space: nowrap;
}
}

@media(max-width:990px){
header.main-header .header-sticky{
   width:100%;
}
  header .navbar {
    padding: 15px 0;
  }  
.main-header .navbar-brand img {
    max-width: 220px;
}
    .responsive-menu .slicknav_menu{
    max-height:75vh;
    overflow-y:auto;
}
.megamenuli:hover .megamenu-box {
    opacity: 1;
    display: block;
    position: static;
    background: transparent;
    backdrop-filter: unset;
}
.megamenuli:hover .megamenu-box h6 {
    color: #fff;
}
.megamenu-box ul{
    border:unset
}
.megamenuli>a{
    position:relative;
}
.megamenuli>a::before {
    content: '\f107';
    font-family: 'FontAwesome';
    font-weight: 900;
    font-size: 12px;
    margin-left: 8px;
    color: var(--dark-color);
    position: absolute;
    right: 15px;
    top: 15px;
    transition: all 0.3s ease-out;
}
.megamenuli:hover>a::before{
    rotate:180deg;
} 
.hero.hero-video {
    height: 60vh;
    min-height: 600px;
}
.page-header {
    padding: 180px 0;
}
   header .navbar {
    padding: 10px 0;
}
.topbar-qoute-btn {
    display: block;
}
   .nav-sec .header-sticky {
    width:100%;
}
.nav-sec{
    position:relative;
}
.topbar-contact-info{
 position:absolute;
    z-index:999;
    right:70px;
    top:21px
}
.slicknav_btn {
    width: 32px;
    height: 32px;
}
button.search-btn.btn-default {
    height: 33px;
    width: 33px;
    padding: 5px;
}

.search .btn-default::before {
    right: -9px;
    width: 20px;
    height: 20px;
    background-size: 20px auto;
}
   .search-modal-area .modal-content .closer-btn{
          right: 15px;
   }
   .search-modal-area .modal-content form.search-box {
    padding: 10px;
}
   .topbar {
    padding: 0;
}
.our-story-counter h3 {
    font-size: 28px;
}
   .social-media {
    transform: translateY(-35%);
}
   .social-media a span {
    display: none;
}
.social-media a {
    transform: unset;
    padding: 6px;
    margin-bottom:5px;
}
.social-media i {
    font-size: 15px;
    width: 17px;
}
   .announcements-title {
    margin-top: 30px;
}
.faculty-section{
    padding:20px;
}
.offset-6 {
    margin-left: 0;
}
   .react-photo-gallery--gallery {
    grid-template-columns: 1fr 1fr;
   grid-auto-rows: unset;
}

.skip-content {
    font-size: 16px !important;
}

.constitution-body .what-we-do-item {
    width: 100%;
}

.constitution-body .mission-vision-nav .nav-link {
    font-size: 15px;
    padding: 10px;
}
.constitution-body .mission-vision-nav .nav-link img {
    max-width: 30px;
    margin-right: 5px;
}
.constitution-body .mission-vision-item {
    padding: 0;
}
.report-box   .our-history-nav {
    position: static;
    z-index: 8;
}
.home-highlight {
    margin-top: 40px;
}
.home-highlight .service-entry-item {
    width: 100%;
}
.d-flex:has(.flex-grow-1) {
    flex-wrap: wrap;
}
.flex-grow-1 {
    width: 100%;
    order: 1;
}  
.flex-grow-1+div {
    width: 100%;
    margin-bottom: 20px;
}

ul.pagination {
    flex-wrap: wrap;
}

}

/* ------------------------------------ Responsive CSS End -------------------------------------- */

/* ------------------------------------ Dark CSS Start -------------------------------------- */
body.dark {
    --primary-color: #000000;
    --secondary-color: #0a0a0a;
    --text-color: #ffffff;
    --accent-color: #000;
    --white-color: #0a0a0a;
    --divider-color: #ffff00;
    --dark-divider-color: #FFFFFF1A;
    --brown-color: #000;
    background: var(--primary-color);
}
body.dark * {
    color: #ffff00 !important;
}
body.dark .notification_services .notification .desc ul li a p,
body.dark .text-muted,
body.dark .dashboard .card p {
    color: #ffff00 !important;
}
body.dark .content-box {
    background: var(--white-color);
}
body.dark .minutes {
    background: #000;
}
body.dark input.form-control {
    background: #000;
}
body.dark input::placeholder{
    color:#ffff00;
}
body.dark .meeting-date,
body.dark .page-link {
    background: var(--white-color);

}
body.dark .pagination .page-item.active .page-link {
    background-color: #000;
    border-color: #fff;
}
body.dark button[type="submit"].search-btn#edit-submit{
    background:#000;
}
body.dark .hero.hero-video .hero-bg-video video {
        filter: brightness(0.3);
}
body.dark .agenda {
    background: #000;
}

body.dark .our-history-list ul li:before {
    filter: brightness(50);
}
body.dark .badge-pill{
    background: #000;
}
body.dark .our-history-nav ul li .nav-link{
    border:unset;
}
body.dark ul.con-detail img,
body.dark .service-item img,
body.dark .service-item .service-footer a img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(7498%) hue-rotate(359deg) brightness(103%) contrast(103%);
}
body.dark #chartdiv canvas {
    filter: invert(1);
}

body.dark .page-contact-us {
    background: unset;
}
body.dark .directory-card {
    background: var(--white-color);
}
body.dark .team-block .inner-box .socials {
    background: #000;
}
body.dark table td {
    background: #000;
}
body.dark .tippy-box[data-theme~=light] {
    background: var(--white-color);
}
body.dark .nav-tabs .nav-item.show .nav-link,
body.dark .nav-tabs .nav-link.active{
    background:var(--white-color);
}
body.dark .date-strip{
    border:1px solid #ffff00;
}
body.dark .social-media a {
    background-color: var(--white-color)!important;
}
body.dark .slicknav_icon .slicknav_icon-bar{
    background-color: #fff;
}
body.dark .btn:hover {
    background-color: inherit;
    border-color: inherit;
}

body.dark .constitution-body .mission-vision-nav .nav-link{
    background:#000;
}
body.dark .constitution-body .mission-vision-nav .nav-link.active{
        background:var(--white-color);
}
body.dark .list-item:hover {
    background: var(--white-color);
}


/* ------------------------------------ Dark CSS End -------------------------------------- */