/* Margin classes */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.ml-5 {
    margin-left: 3rem !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.mr-5 {
    margin-right: 3rem !important;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

.mx-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.mx-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.mx-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.mx-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

/* Padding classes */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: 0.25rem !important;
}

.pl-2 {
    padding-left: 0.5rem !important;
}

.pl-3 {
    padding-left: 1rem !important;
}

.pl-4 {
    padding-left: 1.5rem !important;
}

.pl-5 {
    padding-left: 3rem !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-1 {
    padding-right: 0.25rem !important;
}

.pr-2 {
    padding-right: 0.5rem !important;
}

.pr-3 {
    padding-right: 1rem !important;
}

.pr-4 {
    padding-right: 1.5rem !important;
}

.pr-5 {
    padding-right: 3rem !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.px-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.pagination-wrapper {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pagination {
    display: flex; /* Use flexbox for the container */
    justify-content: center; /* Center the pagination items */
    align-items: center; /* Vertically align items */
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap; /* Allow items to wrap on very small screens */
}

.pagination li {
    margin: 0 5px; /* Apply horizontal margin on both sides for consistent spacing */
}

.pagination li a {
    color: #000;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #ddd;
    display: block; /* Make the anchor fill the list item for a larger clickable area */
    border-radius: 4px; /* Optional: adds rounded corners */
    transition: all 0.3s ease; /* Optional: adds a smooth transition effect */
}

.pagination li.active a {
    background-color: #1c49b1;
    color: white;
    border: 1px solid #1c49b1;
}

/* Optional: Add a hover effect for better user experience */
.pagination li a:hover:not(.active) {
    background-color: #f0f0f0;
}

/* Add this code to the end of your existing CSS */

/* === Mobile Specific Styles === */
/* Target screens smaller than 480px wide */
@media (max-width: 480px) {

    .pagination {
        /* This is the most important rule to prevent wrapping if not already set */
        flex-wrap: nowrap; 
    }

    .pagination li {
        margin: 0 2px; /* Reduce space between items */
    }

    .pagination li a {
        padding: 8px 10px; /* Reduce horizontal padding */
        font-size: 14px;   /* Make the font slightly smaller */
    }

    /* Adjust the ellipsis to match the new, smaller size */
    .pagination li span.pagination-ellipsis {
        padding: 8px 6px;  /* Reduce padding */
        font-size: 14px;   /* Match font size */
    }
}


/* Scoped to blog-post-wrapper */
.blog-post-wrapper .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: #fff;
}

.blog-post-wrapper .card:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Image container to maintain consistent image size */
.blog-post-wrapper .img-container {
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid #e0e0e0;
}

.blog-post-wrapper .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card body */
.blog-post-wrapper .card-body {
    padding: 20px;
}

/* Title */
.blog-post-wrapper .card-title {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #333;
}

.blog-post-wrapper .card-title:hover {
    color: #007bff;
}

/* Calendar icon and date */
.blog-post-wrapper .events-calendar {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.blog-post-wrapper .events-calendaricon {
    margin-right: 5px;
}

.blog-post-wrapper .events-calendaricon img {
    vertical-align: middle;
}

.blog-post-wrapper .events-calendardate {
    color: #666;
}

/* Description */
.blog-post-wrapper .card-text {
    font-size: 0.95rem;
    color: #555;
}

/* Responsive */
@media (min-width: 576px) {
    .blog-post-wrapper .col-sm-6 {
        padding: 15px;
    }
}

/*home new event*/

.news-carousel {
    margin: 0 auto;
    padding: 20px;
    max-width: 100%;
}

.news-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.news-slide img {
    max-width: 510px;
    height: 250px;
}

.cmp-list__item {
    padding: 20px;
}

.cmp-list__item h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.cmp-list__item p {
    font-size: 1rem;
    margin-bottom: 15px;
}

.btn {
    margin-right: 10px;
    padding: 10px 15px;
    text-transform: uppercase;
}

.slick-prev:before, .slick-next:before {
    color: black;
}

/* Remove excess space above the dots */
.slick-slider {
    margin-bottom: 0;
}

.slick-dots {
    margin: 0; /* Remove all margin from the dots */
    padding: 0; /* Remove any padding from the dots */
    bottom: 5px; /* Adjust placement closer to the bottom */
}

.slick-list {
    margin-bottom: 0; /* Ensure no extra margin is being added below the slide content */
}


.slick-dots li button:before {
    font-size: 10px; /* Control the size of the dots */
    color: #000;
}

/* Align text to the left */
.cmp-list__item h3,
.cmp-list__item p {
    text-align: left; /* Ensure text is aligned to the left */
}

/* Align buttons only */
.cmp-list__item-buttons {
    display: flex;
    justify-content: center; /* Center the buttons */
    align-items: center;
    gap: 10px; /* Space between buttons */
    margin-top: 20px; /* Add spacing between text and buttons */
}

/* Adjust button width on mobile for consistency */
.cmp-list__item-buttons .btn {
    width: auto; /* Keep buttons at natural width */
    min-width: 120px; /* Set a minimum width for consistency */
    padding: 10px 20px; /* Standard padding */
}


/* Style buttons to match */
.cmp-list__item .btn {
    margin-top: 10px; /* Add some space between the buttons */
    width: 100%; /* Make the buttons full width on mobile */
    max-width: 200px; /* Set a max width to avoid overly large buttons */
}

@media (max-width: 768px) {
    .cmp-list__item-buttons .btn {
        width: 100%;
        max-width: 200px;
    }

    .cmp-list__item p {
        display: none;
    }

    slick-list draggable {
        margin-bottom: -40px;
    }

    .cmp-list__item-buttons {
        flex-direction: column; /* Stack buttons vertically on mobile */
    }
}

table.table-borderless td {
    border: none !important;
}

.table td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.pdf-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

.pdf-icon {
    font-size: 24px;
    color: #d9534f; /* Bootstrap's 'danger' color for PDF */
    margin-right: 10px;
}

.pdf-title a {
    font-size: 16px;
    color: #337ab7; /* Bootstrap's link color */
    text-decoration: none;
}

.pdf-title a:hover {
    text-decoration: underline;
}
/* Wrapper for the icons */
.icon-section {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.icon-wrapper {
    display: flex;
    gap: 10px; /* Space between icons */
}

.icon-link {
    display: inline-block;
    width: 50px;
    height: auto;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: none; /* Ensure no black background */
}

.icon-link:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
    border-radius: 5px; /* Slightly rounded corners for hover effect */
}

.icon {
    width: 50px; /* Adjust icon size */
    height: auto;
    object-fit: contain;
}

/* Media Query for Mobile */
@media (max-width: 768px) {
    .icon-wrapper {
        display: block; /* Stack icons vertically */
        text-align: center;
    }
    .icon {
        width: 40px; /* Reduce size for smaller screens */
        margin-bottom: 5px;
    }
}
/* Wrapper for the icons */
.icon-section {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the icons horizontally */
    padding: 5px 0; /* Adjust top and bottom padding */
    background-color: transparent; /* Ensure no background color */
    margin: 0; /* Ensure no unintended margin */
}

/* Icon Wrapper to Manage Icon Spacing */
.icon-wrapper {
    display: flex;
    gap: 5px; /* Space between icons */
    align-items: center; /* Ensure vertical alignment */
    justify-content: center; /* Center icons within the section */
}

/* Individual Icon Link */
.icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Set consistent width */
    height: 50px; /* Set consistent height */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0; /* Prevent additional spacing */
    background: none; /* Remove hover background */
    border: none; /* Ensure no border */
}

/* Hover Effect for Icons */
.icon-link:hover {
    transform: scale(1.1); /* Slight zoom effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
    background: none; /* Ensure no background on hover */
    border-radius: 5px; /* Rounded corners */
}

/* Icon Sizing */
.icon {
    width: 100%; /* Ensure icons fit within their containers */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Prevent distortion or cropping */
}

/* Adjusting Padding for Mid-Sized Screens */
@media (max-width: 1024px) {
    .icon-section {
        padding: 5px 0; /* Reduce top and bottom padding further */
    }
    .icon-wrapper {
        gap: 10px; /* Reduce spacing between icons for smaller viewports */
    }
}

/* Responsive Behavior for Mobile Screens */
@media (max-width: 768px) {
    .icon-wrapper {
        flex-direction: column; /* Stack icons vertically */
        gap: 10px; /* Space between stacked icons */
        text-align: center;
    }
    .icon-link {
        width: 40px; /* Smaller width for mobile */
        height: 40px; /* Smaller height for mobile */
    }
}
/* Override hover, focus, and active styles for logo-section */
.logo-section ul.topnav-list li:hover,
.logo-section ul.topnav-list li:focus,
.logo-section ul.topnav-list li:active,
.logo-section ul.topnav-list li:hover a {
    color: unset !important;
    background: none  !important;
    box-shadow: none  !important;
    outline: none  !important;
    transition: none !important;
}

/* Hide the logos slider by default (for desktop) */
.logos-slider {
    display: none; /* Hidden on larger screens */
}

/* Show the logos slider only on mobile */
@media (max-width: 768px) {
    .logos-slider {
        display: flex; /* Make the slider visible on mobile */
    }

    .logos-slider a {
        display: inline-flex; /* Allow link to wrap around the image */
        justify-content: center; /* Center the content inside the link */
        align-items: center;
        text-decoration: none; /* Remove default link styling */
        width: 100%; /* Make link container full-width */
    }

    .logos-slider img {
        width: 100%; /* Make images responsive */
        height: auto; /* Maintain aspect ratio */
        max-width: 100px; /* Limit icon size */
        object-fit: contain; /* Prevent distortion */
    }

    /* Slick dots and navigation styling */
    .slick-dots {
        text-align: center;
        margin-top: 10px;
    }

    .slick-prev,
    .slick-next {
        color: #000; /* Change arrow color */
        font-size: 20px; /* Adjust arrow size */
    }

    .slick-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
/*latest news*/
.news-ticker {
    display: flex;
    gap: 0;
    height: 40px;
    background: #f0f0f0; /* Grey background */
    max-width: 90%;
    margin: 3rem auto;
    border-radius: 5px;
    overflow: hidden;
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
}

.label {
    white-space: nowrap;
    background: #ed474a; /* Red background for label */
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: relative;
    font-size: 16px; /* Default font size */
}

.label::after {
    content: "";
    position: absolute;
    right: -20px;
    border: 10px solid transparent;
    border-left-color: #ed474a;
}

.headlines {
    list-style: none;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #f0f0f0; /* Grey background continuation */
}

.headlines li {
    color: #000;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    line-height: 40px;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: all 1s ease-in-out;
    font-size: 14px; /* Default font size for headlines */
}

.headlines li.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .news-ticker {
        height: 50px; /* Increase height for smaller screens */
    }

    .label {
        white-space: nowrap;
        background: #ed474a;
        color: white;
        font-weight: 600;
        display: flex;
        align-items: center;
        padding: 0 10px;
        position: relative;
    }

    .label::after {
        content: "";
        position: absolute;
        right: -20px;
        border: 10px solid transparent;
        border-left-color: #ed474a;
    }


    .headlines li {
        font-size: 13px; /* Smaller font for headlines */
        line-height: 50px; /* Match increased height */
    }
}

@media (max-width: 480px) {
    .news-ticker {
        flex-direction: column; /* Stack label and headlines vertically */
        height: auto; /* Allow automatic height adjustment */
    }

    .label {
        text-align: center;
        padding: 10px 0; /* Add padding for better spacing */
        border-radius: 0; /* Remove rounded corners */
    }

    .label::after {
        display: none; /* Hide arrow on very small screens */
    }

    .headlines {
        height: auto; /* Adjust height automatically */
    }

    .headlines li {
        font-size: 12px; /* Reduce font size further */
        line-height: normal; /* Use normal line height */
    }
}

.cardtext{
  white-space: nowrap !important;
  line-height: 35px !important;  
}

/* General Styling */
.arrow-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.arrow-list li {
    position: relative;
    padding: 10px 20px 10px 35px; /* Space for arrow */
    font-size: 16px;
    background: #FFFFFF;
    color: #1b1b1b;
    margin-bottom: 8px;
    border-radius: 4px;
}

/* Add arrow before each list item */
.arrow-list li::before {
    content: "\f105"; /* FontAwesome arrow */
    font-family: 'FontAwesome';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #1C49B1; /* Bootstrap primary color */
    font-size: 16px;

}

/* Responsive Design */
@media (max-width: 768px) {
    .arrow-list li {
        font-size: 14px;
        padding: 8px 15px 8px 30px; /* Adjust padding */
    }

    .arrow-list li::before {
        font-size: 14px;
        left: 8px;
    }
}
.no-margin-top{
    margin-top: 0 !important;
}
.no-margin-bottom{
    margin-bottom: 0 !important;
}

.serial-num {
    width: 100%;
    border-collapse: collapse;
}

.serial-num th,
.serial-num td {
    border: 1px solid #ddd;
    padding: 8px;
}

.serial-num th {
    background-color: #f2f2f2;
}

/* Auto-increment Serial Number */
.serial-num tbody {
    counter-reset: rowNumber;
}

.serial-num tbody tr td:first-child::before {
    counter-increment: rowNumber;
    content: counter(rowNumber);
}

/* Center align only the serial number column */
.serial-num th:first-child,
.serial-num td:first-child {
    text-align: center;
}
/*Home Modal*/
/* Remove magnifier symbol when hovering over the close button */
.mfp-close {
    color: white;
    font-size: 24px;
    top: 10px;
    right: 10px;
    cursor: pointer;  /* Ensure it behaves like a regular clickable button */
}

.mfp-close:hover {
    cursor: pointer; /* Ensures the pointer cursor is consistent on hover */
    opacity: 1;  /* Optional: Adjust opacity on hover to make it feel more interactive */
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: pointer !important;
}
img.mfp-img {
    width: auto;
    max-height: 500px !important;
    max-width: 100%;
    height: 500px !important;
}