.card-title {
    font-size:20px;
    font-weight: 500;
    text-align: left; /* Align the card title to the left */
    display: block; /* Ensure the elements are displayed */
    visibility: visible; /* Ensure visibility */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-subtitle {
    font-size: 18px; /* Default font size */
    font-weight: 500;
    text-align: left; /* Align the card subtitle to the left */
    /* display: block; */
    visibility: visible; /* Ensure visibility */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-text p  {
    font-size: 16px;
    font-weight: 400;
    text-align: left; /* Align the card text to the left */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.card-text ul {
    padding-left: 0px;
    margin-bottom: 0;
}

.card-text li {
    display: list-item !important; 
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.card-text ul li:first-child {
    display: list-item !important;
    visibility: visible;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-text ul li:not(:first-child) {
    display: none !important;
}

body {
    font-family: 'Poppins', sans-serif !important;
}

.gpni-logo-advisory {
    width: auto;
    height: 30px;
    position: absolute;
    bottom: 20px;
    right: 20px; /* Default position for laptops/desktops */
}

/* Styles for tablets and small laptops */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .card {
        margin-top: 20px; /* Add space between subheading and card */
    }

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

    .card-subtitle {
        font-size: 18px; 
    }

    .card-text p {
        font-size: 16px; 
        -webkit-line-clamp: 1; /* Limit to 2 lines */
    }

    .modal-body {
        flex-direction: row; /* Arrange content in a row */
        align-items: flex-start; /* Align items to the top */
    }

    .popup-image {
        width: 50%; /* Adjust width for tablets */
        height: 100%; /* Ensure the image covers the entire height */
        max-width: none; /* Remove max-width */
        max-height: none; /* Remove max-height */
        margin-bottom: 0; /* Remove bottom margin */
        margin-right: 20px; /* Add right margin for spacing */
        border-radius: 0; /* Remove border-radius for tablets */
        object-fit: cover; /* Ensure the image covers the entire area */
    }

    .popup-content {
        width: 50%; /* Adjust width for tablets */
        padding: 20px;
    }

    .popup-info {
        text-align: left; /* Align text to the left for tablets */
    }

    .gpni-logo-advisory {
        position: absolute;
        width: auto;
        height: 25px;
        bottom: 15px;
        right: 15px;
    }
}

/* Styles for laptops */
@media (min-width: 1024px) and (max-width: 1439.98px) {

    .card {
        width: 250px; /* Reduce width for laptops */
        height: 556px; /* Set height for laptops */
        margin: 20px auto; /* Center the card and add top and bottom margin */
    }

    .card + .card {
        margin-top: 20px; /* Add space between each card */
    }

    .card-title {
        font-size: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-subtitle {
        font-size:18px;
    }

    .card-text p {
        font-size: 16px; /* Use existing font size class */
        -webkit-line-clamp: 1; /* Limit to 2 lines */
    }

    .card-text ul,li {
        -webkit-line-clamp: 1; /* Limit to 2 lines */
    }

    .card-text ul, .card-text li {
        display: list-item !important;
    }

    .modal-content {
        width: 451px; /* Set width for laptops */
        height: 608px; /* Set height for laptops */
    }

    .modal-body {
        flex-direction: row; /* Arrange content in a row */
        align-items: flex-start; /* Align items to the top */
        padding: 10px 10px 0 10px; /* Keep top padding, remove bottom padding */
        margin-bottom: 0;
    }

    .popup-image {
        width: 40%; /* Adjust width for laptops */
        height: 100%; /* Ensure the image covers the entire height */
        max-width: none; /* Remove max-width */
        max-height: none; /* Remove max-height */
        margin-bottom: 0; /* Remove bottom margin */
        margin-right: 20px; /* Add right margin for spacing */
        border-radius: 0; /* Remove border-radius for laptops */
        object-fit: cover; /* Ensure the image covers the entire area */
    }

    .popup-content {
        width: 60%; /* Adjust width for laptops */
        padding: 20px;
    }

    .popup-info {
        text-align: left; /* Align text to the left for laptops */
    }

    .gpni-logo-advisory {
        position: absolute;
        width: auto;
        height: 30px;
        bottom: 20px;
        right: 20px;
    }
}

/* Styles for large laptops and desktops */
@media (min-width: 1440px) {
    .card {
        width: 392px; /* Set width for large laptops and desktops */
        /* height: 556px;  */
        margin: 20px auto; /* Center the card and add top and bottom margin */
    }

    .card + .card {
        margin-top: 20px; /* Add space between each card */
    }

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

    .card-subtitle {
        font-size: 18px;
    }

    .card-text p ,li ,ul {
        font-size: 16px; /* Use existing font size class */
        -webkit-line-clamp: 1; /* Limit to 2 lines */
    }

    .card-text p, .card-text li, .card-text ul {
        font-size: 16px;
        -webkit-line-clamp: 1;
    }
    
    .card-text li {
        display: list-item !important;
    }

    .modal-content {
        width: 451px; /* Set width for large laptops and desktops */
        height: 608px; /* Set height for large laptops and desktops */
    }

    .modal-body {
        flex-direction: row; /* Arrange content in a row */
        align-items: flex-start; /* Align items to the top */
        padding: 20px 20px 0 20px; /* Keep top padding, remove bottom padding */
        margin-bottom: 0;
    }

    .popup-image {
        width: 40%; /* Adjust width for large laptops and desktops */
        height: 100%; /* Ensure the image covers the entire height */
        max-width: none; /* Remove max-width */
        max-height: none; /* Remove max-height */
        margin-bottom: 0; /* Remove bottom margin */
        margin-right: 20px; /* Add right margin for spacing */
        border-radius: 0; /* Remove border-radius for large laptops and desktops */
        object-fit: cover; /* Ensure the image covers the entire area */
    }

    .popup-content {
        width: 60%; /* Adjust width for large laptops and desktops */
        padding: 20px;
    }

    .popup-info {
        text-align: left; /* Align text to the left for large laptops and desktops */
    }

    .gpni-logo-advisory {
        position: absolute;
        width: auto;
        height: 35px;
        bottom: 25px;
        right: 25px;
    }
}

.card {
    background-color: #f8f8f8ff !important;
    width: 100%; /* Adjust base width */
    border: 1px solid #f2ebeb;
    /* height: 556px;  */
}

.text-primary {
    color: #19191bff !important;
}

.text-info {
    color: #0040c3ff !important;
}

.text-muted {
    color: #000 !important;
}

.gap-32 {
    margin-bottom: 32px;
}

.modal-dialog {
    max-width: 1194px;
    margin: 30px auto;
}

.modal-content {
    border-radius: 24px;
    width: 100%;
    height: auto;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.close {
    padding: 0;
    background: transparent;
    border: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.close img {
    width: 28px;
    height: 28px;
}

.modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px 20px 0 20px; /* Keep top padding, remove bottom padding */
    margin-bottom: 0; /* Ensure no bottom margin */
}

.popup-image {
    width: 100%;
    height: auto;
    max-width: 451px;
    max-height: 608px;
    object-fit: cover;
    border-radius: 12px 12px 12px 12px;
    margin-bottom: 20px; /* Add margin for spacing */
}

.popup-content {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.popup-info {
    margin-bottom: 20px;
}

.popup-description p {
    text-align: left;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-icons img {
    width: 16px;
    height: 16px;
    margin-right: 16px;
}

/* .gpni-logo-2 {
    width: 146px;
    height: 43px;
    flex-shrink: 0;
    position: absolute;
    bottom: 20px;
    right: 20px;
} */

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .card {
        width: 100%; /* Full width for mobile devices */
        height: auto; /* Auto height for mobile devices */
        margin: 10px 0; /* Add top and bottom margin */
    }

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

    .card-subtitle {
        font-size: 18px;
    }

    .card-text p {
        font-size: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gpni-logo-advisory {
        position: relative; /* Change to relative positioning for mobile */
        width: 100px; /* Adjust width for mobile devices */
        height: auto; /* Maintain aspect ratio */
        bottom: auto;
        right: auto;
        margin: 20px auto 10px; /* Center with margin */
        display: block; /* Make it a block element for centering */
    }

    .modal-body {
        padding: 15px 15px 0 15px; /* Keep top padding, remove bottom padding */
        margin-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .card {
        height: auto; /* Auto height for medium mobile devices */
    }

    .card-title, .card-subtitle, .card-text p {
        white-space: normal; /* Allow text to wrap */
        overflow: visible; /* Show overflow text */
        text-overflow: clip; /* Clip overflow text */
        display: -webkit-box;
        -webkit-line-clamp: 1; /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modal-content {
        padding: 5px;
    }

    .modal-body {
        padding: 5px 5px 0 5px; /* Keep top padding, remove bottom padding */
        margin-bottom: 0;
    }

    .popup-content {
        padding: 5px;
    }

    .popup-image {
        max-width: 100%;
        max-height: 300px;
    }

    .popup-info h3 {
        font-size: 1.25rem; /* Adjust font size for medium mobile devices */
    }

    .popup-info h4 {
        font-size: 1rem; /* Adjust font size for medium mobile devices */
    }


    .gpni-logo-advisory {
        width: 80px; /* Smaller for very small devices */
        margin: 15px auto 5px;
    }
}

/* Styles for tablets and small laptops */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .card {
        margin-top: 20px; /* Add space between subheading and card */
    }

    .modal-body {
        flex-direction: row; /* Arrange content in a row */
        align-items: flex-start; /* Align items to the top */
        padding: 10px 10px 0 10px; /* Keep top padding, remove bottom padding */
        margin-bottom: 0;
    }

    .popup-image {
        width: 50%; /* Adjust width for tablets */
        height: 100%; /* Ensure the image covers the entire height */
        max-width: none; /* Remove max-width */
        max-height: none; /* Remove max-height */
        margin-bottom: 0; /* Remove bottom margin */
        margin-right: 20px; /* Add right margin for spacing */
        border-radius: 0; /* Remove border-radius for tablets */
        object-fit: cover; /* Ensure the image covers the entire area */
    }

    .popup-content {
        width: 50%; /* Adjust width for tablets */
        padding: 20px;
    }

    .popup-info {
        text-align: left; /* Align text to the left for tablets */
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    .card {
        width: 100%; /* Reduce width for laptops */
        height: auto; /* Set height for laptops */
        margin: 20px auto; /* Center the card and add top and bottom margin */
    }

    .card + .card {
        margin-top: 20px; /* Add space between each card */
    }

    .modal-body {
        flex-direction: row; /* Arrange content in a row */
        align-items: flex-start; /* Align items to the top */
        padding: 10px 10px 0 10px; /* Keep top padding, remove bottom padding */
        margin-bottom: 0;
    }

    .popup-image {
        width: 40%; /* Adjust width for laptops */
        height: 100%; /* Ensure the image covers the entire height */
        max-width: none; /* Remove max-width */
        max-height: none; /* Remove max-height */
        margin-bottom: 0; /* Remove bottom margin */
        margin-right: 20px; /* Add right margin for spacing */
        border-radius: 0; /* Remove border-radius for laptops */
    }

    .popup-content {
        width: 60%; /* Adjust width for laptops */
        padding: 20px;
    }

    .popup-info {
        text-align: left; /* Align text to the left for laptops */
    }
}

@media (min-width: 1440px) {
    .card {
        width: 100%; /* Set width for large laptops and desktops */
        /* height: 525px;  */
        margin: 20px auto; /* Center the card and add top and bottom margin */
        border: 1px solid #f2ebeb;
    }

    .card + .card {
        margin-top: 20px; /* Add space between each card */
    }

    .modal-body {
        flex-direction: row; /* Arrange content in a row */
        align-items: flex-start; /* Align items to the top */
        padding: 20px 20px 0 20px; /* Keep top padding, remove bottom padding */
        margin-bottom: 0;
    }

    .popup-image {
        width: 40%; /* Adjust width for large laptops and desktops */
        height: 100%; /* Ensure the image covers the entire height */
        max-width: none; /* Remove max-width */
        max-height: none; /* Remove max-height */
        margin-right: 20px; /* Add right margin for spacing */
        border-radius: 0; /* Remove border-radius for large laptops and desktops */
        object-fit: cover; /* Ensure the image covers the entire area */
    }

    .popup-content {
        width: 60%; /* Adjust width for large laptops and desktops */
        padding: 20px;
    }

    .popup-info {
        text-align: left; /* Align text to the left for large laptops and desktops */
    }
}

/* Style for the description text */
.description-text {
    color: rgba(14, 14, 14, 0.90);
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
}

/* Style for the heading text */
.heading-text {
    color: #0E0E0E;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
}

/* Styles for medium mobile devices */
@media (max-width: 575.98px) {
    .card {
        height: auto !important; /* Auto height for medium mobile devices */
    }

    .card-title, .card-subtitle, .card-text p {
        white-space: normal; /* Allow text to wrap */
        overflow: visible; /* Show overflow text */
        text-overflow: clip; /* Clip overflow text */
        display: -webkit-box;
        -webkit-line-clamp: 1; /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Styles for tablets and small laptops */
@media (max-width: 1023.98px) {

    .card-title {
        font-size: 16px;
    }

    .card-subtitle {
        font-size: 14px;
    }

    .card-text p {
        font-size: 12px; /* Use existing font size class */
    }

    .card {
        width: 100%; /* Full width for tablets and small laptops */
        height: auto; /* Auto height for tablets and small laptops */
        margin: 10px 0; /* Add top and bottom margin */
    }

    .modal-content {
        padding: 10px;
    }

    .modal-body {
        padding: 10px 10px 0 10px; /* Keep top padding, remove bottom padding */
        margin-bottom: 0;
    }

    .popup-content {
        padding: 10px;
    }

    .popup-image {
        max-width: 100%;
        max-height: 400px;
    }

    .popup-info h3 {
        font-size: 1.5rem; /* Adjust font size for tablets */
    }

    .popup-info h4 {
        font-size: 1.25rem; /* Adjust font size for tablets */
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
   
    .card-title {
        font-size: 20px; 
    }

    .card-subtitle {
        font-size: 18px;
    }

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

@media (min-width: 1440px) {
    .description-text {
        max-width: 900px; /* Limit the width to ensure it fits in 2 lines */
        margin: 0 auto; /* Center the text */
    }

    .card-title {
        font-size:20px; 
        margin-bottom: 5px;
    }

    .card-subtitle {
        font-size:15px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* .card-text p {
        font-size: 1rem; /* Ensure correct font size for large laptops and desktops 
        line-height: 1.8125rem; /* Ensure correct line height for large laptops and desktops 
    }*/
}

/* Styles for the spacing element */
.spacing-div {
    height: 30px; /* Adds vertical space */
    width: 100%;
    clear: both;
}

/* Responsive adjustments for the spacing div */
@media (max-width: 767.98px) {
    .spacing-div {
        height: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .spacing-div {
        height: 25px;
    }
}

.popup-title{
    font-size: 22px;
    font-weight: 600;
}

.popup-designation{
    font-size: 20px;
    font-weight: 500;
}

.modal show {
    padding-left: none;
}


body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.modal-backdrop {
    width: 100vw !important;
    height: 100vh !important;
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

/* Keep scrollbar visibility consistent */
html {
    overflow-y: scroll !important;
}

/* Force modal to take correct dimensions */
.modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure modals stack correctly */
.modal-dialog {
    margin: 1.75rem auto !important;
}

/* Fix for style attribute on modal element */
.modal.fade {
    padding-left: 0 !important;
}