@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* Dashboard CSS */
:root {
    --brand-color: #2563EB;
    --secondary-colors: #202124;
    --white: #FFFFFF;
    --sidebar-hover: #eff4ff;
    --task-list-border: #d6d6d6;
    --text-color: #434343;
    --button-border: #eaf0ff;
    --background-color: #eaf0ff;
    --light-upcoming-color: #d6d3fb;
    --light-pending-color: #ffedda;
    --light-Approvals-color: #c9ffd7;
    --upcoming-color: #6F39CE;
    --pending-color: #FF9535;
    --Approvals-color: #00B580;
    --font-weight: 600;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
}

body {
    background-color: var(--background-color);
    /* display: flex; */
}

.body-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}

.logut-conatiner {
    background-color: #262626;
    padding: 0.4rem;
    color: #fff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    margin-top: 0.1rem;
}

.sidebar {
    position: relative;
    width: 256px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 70px;
    background-color: #fff;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 4px;
    transition: all 0.3s;
}

    .sidebar .head {
        display: flex;
        justify-content: center;
        padding-bottom: 1rem;
        border-bottom: 1px solid #f6f6f6;
    }

.Brand-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

    .Brand-img img {
        width: 100%;
        object-fit: cover;
    }

.nav {
    flex: 1;
}

.menu ul li {
    position: relative;
    list-style: none;
    margin-bottom: 5px;
}

.icon-change i {
    height: 24px;
    font-size: 24px;
    width: 24px;
}

.menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: var(--font-weight);
    color: var(--text-color);
    text-decoration: none;
    padding: 12px 8px;
    border-radius: 8px;
    transition: all 0.3s;
}

.menu ul li i {
    font-size: 18px;
}

.menu ul li > a:hover,
.menu ul li.active > a {
    color: var(--brand-color);
}

.menu ul li .icon {
    font-size: 20px;
}

.menu ul li .text {
    flex: 1;
}

.menu ul li .arrow {
    font-size: 14px;
    transition: all 0.3s;
}

.menu ul li.active .arrow {
    transform: rotate(180deg);
}

.menu .sub-menu {
    display: none;
    margin-left: 20px;
    padding-left: 20px;
    padding-top: 5px;
    border-left: 1px solid var(--brand-color);
}

    .menu .sub-menu li a {
        padding: 10px 8px;
        font-size: 12px;
    }

.menu-btn {
    position: absolute;
    right: 0px;
    top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--white);
    border: 4px solid var(--button-border);
    background-color: var(--brand-color);
    z-index: 1002;
}
/* .menu-btn:hover i {
  color: #000;
} */
/* .menu-btn i {
  transition: all 0.3s;
} */
.sidebar.active {
    width: 92px;
}

    .sidebar.active .menu-btn i {
        transform: rotate(180deg);
    }

    .sidebar.active .menu .title {
        text-align: center;
    }

    .sidebar.active .menu ul li .arrow {
        display: none;
    }

    .sidebar.active .menu > ul > li > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .sidebar.active .menu > ul > li > a .text {
            position: absolute;
            left: 70px;
            top: 50%;
            transform: translateY(-50%);
            padding: 10px;
            border-radius: 4px;
            color: #fff;
            background-color: #000;
            opacity: 1;
            visibility: hidden;
        }

            .sidebar.active .menu > ul > li > a .text::after {
                content: "";
                position: absolute;
                left: -5px;
                top: 20%;
                width: 20px;
                height: 20px;
                border-radius: 2px;
                background-color: #000;
                transform: rotate(45deg);
                z-index: -1;
            }

.Online {
    color: var(--Approvals-color);
    font-size: 12px;
    padding: 0.5rem;
    border-radius: 0.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
/*Hide tooltip 02/02/2026*/
/*.sidebar.active .menu > ul > li > a:hover .text {
    left: 50px;
    opacity: 1;
    z-index: 999;
    visibility: visible;
}
*/
.sidebar.active .menu .sub-menu {
    position: absolute;
    top: 0;
    left: 20px;
    width: 200px;
    border-radius: 20px;
    padding: 10px 20px;
    border: 1px solid #f6f6f6;
    background-color: #fff;
    box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.1);
}
/* main container start here */
.main-container {
    background-color: var(--background-color);
    width: 100%;
    padding: 1rem;
    flex: 1;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative; /* ensures form elements render normally */
    margin-top: 70px; /* adjust based on your header height */
    min-width: 0; /* allows flex item to shrink below content size */
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    background-color: var(--white);
    padding: 0.8rem;
    margin-bottom: 1rem;
    align-items: center;
    border-radius: 0.5rem;
}

.user-info {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.side-top-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
}

.checkin-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

.checkin-date-time {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.checkin-head {
    font-size: 12px;
    color: #19193E;
    font-weight: 700;
}

.checkin-time {
    font-size: 12px;
    color: #00C880;
    font-weight: 600;
}

.devider {
    border-right: 2px solid #dadada;
    height: 40px;
}

.devider-list {
    border-right: 1px solid #d6d6d6;
    height: 40px;
}

.user-name {
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
    font-weight: var(--font-weight);
    color: var(--secondary-colors);
}

.haeder-title {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.head-info {
    color: var(--text-color);
    text-align: center;
    font-size: 1.125rem;
    font-weight: var(--font-weight);
}

.sub-text {
    color: #64748B;
    font-size: 14px;
}

.sub-head {
    color: var(--brand-color);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--font-weight);
}

.header-container {
    background: linear-gradient(93deg, #00123A 1.28%, #528BFF 97.63%);
    padding: 0.3rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* full width */
    z-index: 1052; /* maximum z-index to keep it above all other elements */
    background-color: #fff; /* give it a background so content doesn't show through */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* optional: subtle shadow */
}

.main-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.header-head-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.task-details-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#RFI-container {
    display: flex;
    justify-content: space-evenly;
}

    #RFI-container > div {
        flex: 0 0 24%;
    }

#RFI-sub-container {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
    flex-direction: column;
}

.Page-login-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}
/* Left side (image) */
.side-image-container {
    flex: 0 0 70%;
    height: 100vh; /* match container height */
}

.side-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* keep image proportional */
}
/* Right side (login box) */
.login-box {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* center vertically */
    padding: 30px 25px;
    background: #e6f0ff;
    border-radius: 12px 0 0 12px;
    text-align: center;
    align-items: center;
    height: 100vh; /* match container */
    overflow-y: auto; /* if form gets too tall on small screens */
}

    /* Scale the login panel content to 75% so the full form (header + fields +
       CAPTCHA) fits within the viewport without triggering a scrollbar. */
    .login-box .head,
    .login-box .head-text-bpgrs,
    .login-box .input-container {
        zoom: 0.75;
    }

    /* Typography & form elements */
    .login-box h2 {
        font-weight: 600;
        margin-bottom: 25px;
        color: #1a3e72;
    }

    .login-box label {
        display: block;
        text-align: left;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .login-box input {
        width: 100%;
        padding: 10px 12px;
        margin-bottom: 15px;
        border-radius: 6px;
        border: 1px solid #ced4da;
    }

.input-container {
    width: 100%;
}
/* Buttons */
.btn-primary {
    width: 100%;
    padding: 10px;
    background-color: #1a3e72;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #0f2a55;
    }

/* SCOPED CORRECTION for the rule above.
   That `.btn-primary` selector is unscoped: it was written for the login box (note its
   neighbours — .login-box input, .input-container) but it applies to EVERY primary button in
   the application, forcing width:100% and padding:10px on all of them. Inside an action row
   that makes one button stretch across the entire card while its siblings size to their
   labels. The Conversation button on the Email Review / Triage cards hit this exactly: it
   switches from .btn-outline-primary to .btn-primary when a citizen reply is unread, which is
   why the button only ballooned on cards that had a new reply.
   A .btn-sm is an inline action button by definition — never a full-width form submit — so
   restoring natural sizing for that combination is safe and leaves the login button untouched.
   Padding is handed back to Bootstrap's own size variables instead of a hard-coded value, so
   the button matches its .btn-sm siblings exactly. */
.btn-primary.btn-sm {
    width: auto;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    /* The rule above also sets `border: none`, which leaves these 2px shorter than their
       bordered siblings and 1px out of vertical alignment in an action row. Restore a border
       in the button's own colour so the height matches exactly with no visible seam. */
    border: var(--bs-btn-border-width) solid #1a3e72;
}

    .btn-primary.btn-sm:hover {
        border-color: #0f2a55; /* follow the hover background set above */
    }

/* Resend link */
.resend {
    margin-top: 15px;
    font-size: 0.9rem;
}

    .resend a {
        color: #1a3e72;
        text-decoration: none;
        font-weight: 500;
    }

        .resend a:hover {
            text-decoration: underline;
        }

/* Divider */
hr {
    margin: 20px 0;
    border-top: 1px solid #dee2e6;
}

.task-details {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.header-sub-text {
    color: #fff;
}

.card-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0.8rem;
    gap: 1rem;
}

.list-card-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.list-card {
    width: 100%;
    padding: 0.8rem;
    cursor: pointer;
    border-radius: 8px;
    position: relative;
    display: inline-block;
    background-color: #fff;
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.card-container-second {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    gap: 1rem;
}
/* Slider css start here */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
    height: 330px;
}

.mySlides {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 0.8s ease-in-out;
}

    .mySlides.active {
        display: block;
        transform: translateX(0);
    }

    .mySlides.prev {
        display: block;
        transform: translateX(-100%);
    }

    .mySlides img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

/* The dots/bullets/indicators */
.dot-container {
    text-align: center;
    padding: 10px 0;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.isactive {
    background-color: #FD740D;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
/* @media only screen and (max-width: 300px) {
  .text {font-size: 11px}
} */
/* slider css end here */

/* news latter section */
.news-latter-container {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
}

.employee-slider-section {
    width: 65%;
}

.card {
    width: 100%;
    border-radius: 0.8rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.slider {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.slides {
    display: flex;
    width: 100%;
    animation: slide 6s infinite;
}

    .slides img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    33.33% {
        transform: translateX(-100%);
    }

    66.66% {
        transform: translateX(-200%);
    }

    99.99% {
        transform: translateX(-300%);
    }
}

.content {
    padding: 20px;
    text-align: center;
}

    .content h2 {
        margin: 0 0 10px;
        font-size: 1.5rem;
        color: #333;
    }

    .content p {
        font-size: 0.9rem;
        color: #666;
    }

/*  news latter section end  */

/* Project Information start section */
.new-project-container {
    width: 35%;
    background-color: #fff;
    border-radius: 0.8rem;
}

.card-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-container {
    width: 100%;
    cursor: pointer;
}

.image-project {
    position: relative;
    align-self: stretch;
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 10px;
    max-width: 100%;
    transition: transform 0.5s ease-in-out;
}

.image-container:hover .image-project {
    transform: scale(1.2);
}

.btn-tag {
    border-radius: 24px;
    color: #1a3e72;
    border: 1px solid #1a3e72;
}

    .btn-tag:hover {
        border-radius: 24px;
        color: #fff;
        background-color: #1a3e72;
    }

.project-name {
    color: #454545;
    font-weight: 700;
    font-size: 0.9rem;
}

.project-details {
    font-size: 0.9rem;
    color: #FD740D;
}
/* Project Information end section */

.side-icon {
    width: 32px;
    border-radius: 0.5rem;
}
/* Event and Update section start */
.Event-Update-container {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.New-Event-container {
    width: 35%;
    background-color: #35008C;
    border-radius: 0.8rem;
}

.Event-latest-container {
    width: 65%;
    border-radius: 0.8rem;
}

.event-poster {
    width: 100%;
}

.event-poster-image {
    width: 100%;
}

.Event-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.Event-update {
    display: flex;
    justify-content: space-between;
}

.Event-date {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.Event-num {
    font-size: 1.5rem;
    color: #FD740D;
    font-weight: 800;
}

.Event-txt {
    font-size: 1.5rem;
    color: #FFFFFF;
}

.mid-box-update {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.Event-head {
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: 700;
}

.Event-details {
    font-size: 2rem;
    color: #FD740D;
    font-weight: 700;
}

.bottom-box-update {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.Event-name {
    font-size: 2rem;
    color: #FD740D;
    font-weight: 900;
}

.Event-name-details {
    font-size: 2rem;
    color: #FFFFFF;
}
/* Event and Update Section End */

/* video container */
#youtube-placeholder iframe {
    width: 100%;
    height: 330px;
    border-radius: 12px;
    object-fit: cover;
}

.iframe-container {
    background: #fbf9ff;
    object-fit: cover;
    border: 10px solid #fbf9ff;
    border-radius: 20px;
    flex: 1; /* Allows it to resize dynamically */
    position: relative;
    overflow: hidden;
    width: 65%;
}

/* news updates section */
.news-update-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    gap: 1rem;
}

.CBD-IBD-News {
    width: 100%;
    border-radius: 8px;
    padding: 0.8rem;
    background-color: var(--white);
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.cbd-ibd-heading {
    color: var(--secondary-colors);
    font-size: 1rem;
    padding: 0.1rem 1rem 0.8rem 0.1rem;
    font-weight: var(--font-weight);
}

.list-contatnt {
    display: flex;
    gap: 0.9rem;
    border: 1px solid #c1c1c1;
    border-radius: 0.8rem;
    padding: 0.5rem;
    margin-bottom: 0.8rem;
}
/* .cbd-image-box{
  width: 100%;
} */
.cbd-image {
    width: 100px;
    border-radius: 0.5rem;
}

.cbd-ibd-list-head {
    font-size: 12px;
    font-weight: 700;
}

.cbd-ibd-list-subhead {
    font-size: 12px;
    color: #848484;
}

.cbd-ibd-containt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cbd-ibd-list-time-date {
    font-size: 12px;
    color: var(--brand-color);
    font-weight: 600;
}
/* news updates section */
.link-card {
    width: 100%;
    padding: 1rem;
    cursor: pointer;
    border-radius: 8px;
    background-color: var(--white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

    .link-card:hover {
        transform: scale(1.05);
    }

.link-containt {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.heading-text {
    color: var(--text-color);
    font-size: 0.8rem;
    font-weight: var(--font-weight);
}

.Event-upcoming-image {
    width: 75%;
    object-fit: cover;
    margin: auto;
}

.Event-image-upcomig {
    width: 100%;
    border-radius: 12px;
}

.card-icons {
    width: 36px;
    height: 36px;
}

.link-btn {
    display: inline-flex;
    border: none;
    cursor: pointer;
    color: var(--brand-color);
    font-weight: var(--font-weight);
    padding: 0.1rem 0.5rem 0rem 0rem;
    justify-content: center;
    align-items: center;
}

.link-card a {
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.button-container {
    display: flex;
    cursor: pointer;
    align-items: center;
}

    .button-container a {
        cursor: pointer;
    }

    .button-container i {
        color: var(--brand-color);
        font-weight: 900;
    }
/* .link-btn:hover {
  filter: drop-shadow(0px 8px 8px rgba(236, 126, 43, 0.46));
} */

.task-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    gap: 1rem;
}

.upcoming-card {
    width: 100%;
    border-radius: 8px;
    background-color: var(--white);
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.Pending-card {
    width: 100%;
    border-radius: 8px;
    background-color: var(--white);
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.Approvals-card {
    width: 100%;
    border-radius: 8px;
    background-color: var(--white);
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.upcoming-heading {
    color: var(--upcoming-color);
    font-size: 1rem;
    padding: 1rem 1rem 0.3rem 1rem;
    font-weight: var(--font-weight);
    border-radius: 0.5rem 0.5rem 0rem 0rem;
}

.pending-heading {
    color: var(--pending-color);
    font-size: 1rem;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    padding: 1rem 1rem 0.3rem 1rem;
    font-weight: var(--font-weight);
}

.Approvals-heading {
    color: var(--Approvals-color);
    font-size: 1rem;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    padding: 1rem 1rem 0.3rem 1rem;
    font-weight: var(--font-weight);
}

.Pending-task {
    color: var(--pending-color);
    font-size: 1rem;
    padding: 1rem 1rem 1rem 1rem;
    font-weight: 500;
}

.task-date-time {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.task-date {
    font-size: 14px;
    font-weight: 700;
    color: #6F39CE;
}

.pending-task-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-color)
}

.Approvals-task-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--Approvals-color)
}

.task-time {
    font-size: 12px;
    color: #9d9d9d;
}

.list-item {
    display: flex;
    justify-content: space-around;
    padding: 0.8rem;
    margin: 0.8rem;
    border-top: solid 1px var(--task-list-border);
    border-bottom: solid 1px var(--task-list-border);
    border-left: solid 1px var(--task-list-border);
    border-right: solid 6px var(--upcoming-color);
    border-radius: 0.5rem;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pending-list-item {
    display: flex;
    justify-content: space-around;
    padding: 0.8rem;
    margin: 0.8rem;
    gap: 0.5rem;
    border-top: solid 1px var(--task-list-border);
    border-bottom: solid 1px var(--task-list-border);
    border-left: solid 1px var(--task-list-border);
    border-right: solid 6px var(--pending-color);
    border-radius: 0.5rem;
}

.Approvals-list-item {
    display: flex;
    justify-content: space-around;
    padding: 0.8rem;
    margin: 0.8rem;
    gap: 0.5rem;
    border-top: solid 1px var(--task-list-border);
    border-bottom: solid 1px var(--task-list-border);
    border-left: solid 1px var(--task-list-border);
    border-right: solid 6px var(--Approvals-color);
    border-radius: 0.5rem;
}

.task-name {
    font-weight: var(--font-weight);
    color: var(--text-color);
    font-size: 14px;
}

.task-details {
    font-size: 0.8rem;
    color: var(--text-color);
}
/* Responsive Fix */
@media (max-width: 992px) {
    body {
        overflow: auto; /* allow scroll on small screens */
        height: auto;
    }

    .login-box {
        width: 100%;
    }

    .input-container {
        width: 100%;
    }

    .Page-login-container {
        flex-direction: column; /* stack */
        background-color: #e6f0ff;
    }

    /* md */
    @media(max-width: 768px) {
        .card-container {
            flex-direction: column;
            width: 100%;
        }

        .list-card-container {
            flex-direction: column;
        }

        .card-container-second {
            flex-direction: column;
            width: 100%;
        }

        .Page-login-container {
            flex-direction: column;
        }

        .task-container {
            flex-direction: column;
            width: 100%;
        }

        .news-latter-container {
            flex-direction: column;
        }

        .employee-slider-section {
            width: 100%;
        }

        .Event-latest-container {
            width: 100%;
        }

        .new-project-container {
            width: 100%;
        }

        .Event-Update-container {
            flex-direction: column;
        }

        .New-Event-container {
            width: 100%;
        }

        .news-update-container {
            flex-direction: column;
        }

        .iframe-container {
            width: 100%;
        }

        .Event-image-upcomig {
            width: 100%;
        }

        .Event-upcoming-image {
            width: 100%;
        }

        #RFI-container > div {
            flex: 0 0 48%;
        }
    }
}

@media(max-width: 500px) {
    .Online {
        flex-direction: column;
        gap: 1rem;
    }

    .employee-slider-section {
        height: 140px;
    }

    .slides img {
        height: 140px;
    }

    .sidebar {
        width: 100%;
    }

    .header-wrapper {
        flex-direction: column;
    }

    .sidebar.active {
        position: absolute;
        width: 36px;
        left: 0;
        padding: 0.5rem;
    }

    .menu ul li i {
        font-size: 14px;
    }

    .haeder-title {
        margin-left: 1rem;
    }

    .menu-btn {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        z-index: 1002;
    }
}

@media(max-width: 992px) {
    .menu-btn {
        top: 10px;
        right: 10px;
    }
}

@media(max-width: 500px) {
    .new-card {
        padding: 0.2rem;
    }
}