html {
  font-size: 14px;
}

button.neumorphic {
    height: 14rem;
    font-size: 1.1rem;
    gap: 1.5rem;
    border: 0.5rem solid transparent;
    border-radius: 1rem;
    color: hsl(0 0% 10%);
    background: none;
    display: grid;
    place-content: center;
    --shadow: -.5rem -.5rem 1rem hsl(0 0% 100% / .75), .5rem .5rem 1rem hsl(0 0% 50% / .5);
    box-shadow: var(--shadow);
    outline: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.buttons-admin {
    display: grid;
    width: min(60rem, 100%);
    margin-inline: auto;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 5rem;
}

button.neumorphic::before,
button.neumorphic::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

button.neumorphic::before {
    background: radial-gradient(circle at center, rgba(0, 123, 255, 0.1), transparent 70%);
}

button.neumorphic::after {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
}

button.neumorphic:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 123, 255, 0.3);
}

    button.neumorphic:hover::before,
    button.neumorphic:hover::after {
        opacity: 1;
    }

:root {
    --cpsi-blue: #9ebbe8;
    --cpsi-yellow: #ffe600;
    --cpsi-green: #00ab47;
    --cpsi-red: #ed1626;
    --cpsi-light-gray: #ececec;
    --cpsi-gray: #999898;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/*make the footer to be at the buttom*/
body {
  margin-bottom: 0;
}
header {
    background-color: var(--cpsi-gray);
    color: aliceblue;
}
.cpsiblue {
    color: var(--cpsi-blue);
}


/* Modern Table Header Styling */
.table-header-gradient {
    background: linear-gradient(135deg, #20c997 0%, #20c997 100%);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    border: none;
}

    .table-header-gradient th {
        padding: 1rem 0.75rem;
        vertical-align: middle;
        border-bottom: none;
    }

    /* Hover effect for header */
    .table-header-gradient:hover th {
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

/* Requirements column styling */
.requirements-content {
    max-width: 500px;
    white-space: normal;
    word-wrap: break-word;
}

    .requirements-content p {
        margin-bottom: 0.5rem;
    }

    .requirements-content strong {
        font-weight: bold;
    }

    .requirements-content ul,
    .requirements-content ol {
        padding-left: 1.5rem;
        margin-bottom: 0.5rem;
    }

/* Table row hover effect */
tbody tr:hover {
    background-color: rgba(106, 17, 203, 0.05);
    transition: all 0.2s ease;
}

/* Card styling */
.card {
    border-radius: 12px;
    overflow: hidden;
}

.card-header {
    padding: 1.5rem;
    border-bottom: none;
}

.requirements-content {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.journal-wave {
    position: relative;
    height: 420px;
    overflow: hidden;
    background-color: #9ebbe8;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

    .journal-wave svg {
        width: 100vw !important;
        min-width: 100vw;
        left: 0;
        right: 0;
        display: block;
    }

.journal-wave-text {
    z-index: 2;
    padding: 0 1rem;
    color: #fff;
}

/* Custom styles for the Career Details page */
.career-card {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(124, 184, 235, 0.3);
    transition: box-shadow 0.3s ease;
}

    .career-card:hover {
        box-shadow: 0 12px 30px rgba(124, 184, 235, 0.5);
    }

.career-header {
    background: linear-gradient(135deg, #5a9ddb, #7cb8eb);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 1px;
}

dt {
    font-weight: 600;
    color: #333;
    padding-top: 12px;
    font-size: 1.1rem;
}

dd {
    font-size: 1rem;
    color: #555;
}

    dd a {
        color: #0d6efd;
        text-decoration: none;
        word-break: break-all;
    }

        dd a:hover {
            text-decoration: underline;
        }

.btn-primary {
    background-color: #5a9ddb;
    border-color: #5a9ddb;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

    .btn-primary:hover {
        background-color: #3d82c7;
        border-color: #3d82c7;
    }

.btn-secondary {
    font-weight: 600;
}
}

/*out tem style */
.modal-content {
    background: #ffffff;
    border-radius: 20px;
}

.modal-header {
    border-bottom: none;
    background-color: #7cb8eb;
}

.modal-title {
    font-size: 1.5rem;
    color: #ffffff;
}

.modal-body {
    background-color: #f9f9f9;
}

#teamModalRole {
    color: #495057;
    font-weight: 500;
}

#teamModalDesc {
    line-height: 1.6;
}

.team-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #7cb8eb;
}

    .team-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

.btn-custom {
    background-color: #7cb8eb;
    color: white;
    border: none;
}

    .btn-custom:hover {
        background-color: #66a4d6;
        color: white;
    }

    /*the style for Paragraph on the TEAM PAGE*/
@keyframes popup-loop {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

.popup-loop {
    color: #e5e50f;
    animation: popup-loop 6s ease-in-out 0.5s infinite;
    display: inline-block;
    font-weight: bold;
}

/*THE style for contact us page*/
/* Overall Page */
.contact-body {
    background-color: #f9f9fb;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Card Styles */
.contact-card {
    border-radius: 20px;
    overflow: hidden;
}

/* Contact Info Card (left side) */
.contact-card-body p, .contact-card-body a {
    color: #f1f1f1;
}

.contact-card-title {
    font-size: 20px;
    font-weight: bold;
}

.contact-card-text {
    font-size: 16px;
}

.contact-card-body {
    padding: 2rem;
}

/* Left Side Styling */
.col-md-6:first-child .contact-card {
    background-color: #9ebbe8;
    color: white;
}
/* Right Side Styling (Form Card) */
.col-md-6:last-child .contact-card {
    background-color: #e9ecef; /* Soft light gray like your example */
    color: #333;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Optional soft shadow */
    border-radius: 20px;
    padding: 2rem;
}




/* Form Styles */
.contact-form-group label {
    font-weight: 600;
    color: #333;
}

.contact-form-control {
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 0.75rem;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}

    .contact-form-control:focus {
        border-color: #9ebbe8;
        box-shadow: 0 0 5px rgba(158, 187, 232, 0.6);
    }




.custom-submit-btn {
    background-color: #5fa6dd;
    color: white;
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
}

    .glass-card .contact-form-control {
        background-color: rgba(255, 255, 255, 0.9);
    }

.btn-block {
    width: 100%;
}



/*for hidding the scrorable x axis*/
html, body {
    overflow-x: hidden;
}

@media (max-width: 991.98px) {
    .navbar .navbar-brand img {
        height: 50px !important;
    }

    .navbar .nav-link img {
        height: 30px !important;
    }

    .navbar .navbar-toggler {
        margin-left: auto;
    }
}

/*when on mobile view the background color is covering the whole dropdown text*/
@media (max-width: 991px) {
    .dropdown-menu {
        min-width: 250px; /* or more, adjust as needed */
        white-space: nowrap; /* prevents word wrapping */
    }

    .dropdown-item {
        white-space: normal;
        word-break: keep-all;
    }
}



/*events style*/
.event-animated-bounce {
    animation: bounce 1.2s infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

.event-no-events-innovative {
    background: #f8f9fa;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    max-width: 420px;
    margin: 2rem auto;
}

/* Hovering for screens 992px and above is enabled  */
/*@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
    }
}*/

/* Disable hover dropdowns on mobile */
@media (max-width: 991px) {
    .navbar .dropdown-menu {
        display: none;
    }

        .navbar .dropdown-menu.show {
            display: block;
        }
}

/*the tag style on the knowledge repos*/
.tag-outline {
    display: inline-block;
    padding: 3px 8px; /* Slightly larger */
    border-radius: 5px;
    margin: 4px 6px 4px 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff; /* White text */
    text-decoration: none;
}


/* Rotating border + text colors */
.tag-color-0 {
    background-color: #00ab47;
}

.tag-color-1 {
    background-color: #007bff;
}

.tag-color-2 {
    background-color: #17a2b8;
}

.tag-color-3 {
    background-color: #7cb8eb;
     
}

.tag-color-4 {
    background-color: #dc3545;
}

.tag-color-5 {
    background-color: #E6B801;
}

.tag-outline:hover {
    opacity: 0.85;
    cursor: pointer;
    color: #fff; /* Keep text white on hover */
}

/*this is for the admin side*/
.tag-admin-outline {
    display: inline-block;
    color: #000;
    border: 1px solid #000;
    border-radius: 15px;
    padding: 4px 10px;
    margin: 3px 5px 3px 0;
    font-size: 14px;
    font-weight: 500;
    background-color: transparent;
    transition: 0.3s ease-in-out;
}

/*Knowledge repo index*/
.para {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 0.9rem;
}

/*Styling for the prev and next buttons on the image slider for knowledge info*/
.black-carousel-icon {
    filter: invert(1);
    background-color: black;
    border-radius: 50%;
}

/* The knowledgeInfo style */
.knowledgeInfo .card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: -80px;
    overflow: hidden;
}

    .knowledgeInfo .card h3 {
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 1rem;
    }

.knowledgeInfo .list-group-item {
    border-left: none;
    border-right: none;
    padding: 1.25rem 1.5rem;
    transition: var(--transition);
}

    .knowledgeInfo .list-group-item:first-child {
        border-top: none;
    }

    .knowledgeInfo .list-group-item:hover {
        background-color: rgba(72, 149, 239, 0.05);
    }

.knowledgeInfo .list-unstyled li {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    margin-bottom: 0.5rem;
}

    .knowledgeInfo .list-unstyled li:hover {
        background-color: rgba(72, 149, 239, 0.1);
    }

.knowledgeInfo .list-unstyled a {
    color: var(--dark-color);
    text-decoration: none;
    margin-left: 0.5rem;
    transition: var(--transition);
}

    .knowledgeInfo .list-unstyled a:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }

/* Carousel (image) for KnowledgeInfo */
.knowledgeInfo .carousel {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

/* Limit image area only, not whole carousel */
.knowledgeInfo .carousel-inner {
    max-width: 720px; /* Match video max-width */
    width: 100%;
    aspect-ratio: 16/9; /* Match video aspect ratio */
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Image itself */
.knowledgeInfo .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Arrow style — simple, clean */
.knowledgeInfo .carousel-arrow {
    color: black;
    font-size: 2rem;
    background: none;
    padding: 0;
    border: none;
    display: inline-block;
    line-height: 1;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
}

/* Position arrows outside the image */
.knowledgeInfo .carousel-control-prev,
.knowledgeInfo .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: auto;
}

/* Push arrows outside the 600px image */
.knowledgeInfo .carousel-control-prev {
    left: calc(50% - 560px); /* 600/2 + 30px outside */
}

.knowledgeInfo .carousel-control-next {
    right: calc(50% - 560px);
}


/* Responsive video in card  KnowledgeInfo */
.knowledgeInfo .ratio {
    aspect-ratio: 16/9;
    max-width: 720px; /* Limit the max width */
    margin: 0 auto; /* Center the video horizontally */
    width: 100%;
    height: auto;
}

/* Form fields KnowledgeInfo  */
.knowledgeInfo .form-control {
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    transition: var(--transition);
}

    .knowledgeInfo .form-control:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 0.25rem rgba(72, 149, 239, 0.25);
    }


/*stlying the knowledge repo and the journal on the public side*/
.kp-centered-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}


/*Tender styling*/
.careers-wave {
    position: relative;
    height: 420px;
    overflow: hidden;
    background-color: #7cb8eb;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

    .careers-wave svg {
        width: 100vw !important;
        min-width: 100vw;
        left: 0;
        right: 0;
        display: block;
    }

.careers-wave-text {
    z-index: 2;
    padding: 0 1rem;
    color: #fff;
}

/*.form-label {
    font-weight: bold;
}*/

/*.section-title {
    border-bottom: 2px solid #28a745;
    padding-bottom: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
}*/

/*.form-control {
    border-radius: 5px;
    border: 1px solid #ced4da;
}*/

.document-link {
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

    .document-link:hover {
        color: #0056b3;
        text-decoration: underline;
    }

.list-group-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

    .list-group-item:last-child {
        border-bottom: none;
    }

.preview-link {
    max-width: 120px;
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.pagination .page-link {
    color: #007bff;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
}

.btn-group {
    display: flex;
    gap: 4px;
}
/*Tender badges*/
.status-badge {
    display: inline-block;
    min-width: 80px;
    padding: 0.3em 1.2em;
    font-weight: 700;
    font-size: 1em;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.status-open {
    background-color: #218838;
}

.status-closed {
    background-color: #dc3545;
}

.status-awarded {
    background-color: #1976d2;
}

.status-cancelled {
    background-color: #6c757d;
}

.status-other {
    background-color: #6c757d;
}

/*the flipbook style*/

/*.flipbook-container {
    width: 800px;*/ /* or whatever fits your layout */
    /*height: 600px;
    margin-top: 15px;
    display: none;*/ /* hidden initially */
/*}*/

@media (max-width: 768px) {
    #flipbookContent {
        flex-direction: column !important;
        max-width: 100%;
        max-height: 100%;
    }

    #leftPageCanvas, #rightPageCanvas {
        width: 100% !important;
        height: auto !important;
        box-shadow: none !important;
    }

    .flipbook-spine {
        display: none !important;
    }
}