.static-card-item p,
.static-card-item h4,
.static-card-item h3,
.static-card-item h2,
.static-card-item h1{
    margin:0;
    padding:0;
	overflow-wrap: normal;
}
.static-card-external-button {
    display: flex;
    padding: var(--Spacing-M, 16px) var(--Spacing-XL, 2.4rem);
    align-items: center;
    gap: 0.8rem;
    border-radius: var(--Radii-Full, 100rem);
    background: var(--Color-Buttons-Background-Primary-Idle, #03231b);
    color: #fff;
}

.static-card-external-button img, 
.static-card-external-button i,
.static-card-external-button svg{
    width:24px;
    height:24px;

}

@media (max-width: 768px) {
    .static-card-external-button {
        padding: 0.8rem 1.2rem;
        gap: 0.4rem;
    }
    .static-card-external-button img, 
    .static-card-external-button i,
	.static-card-external-button svg{
        width:17.143px;
        height:17.143px;

    }
}

.static-card-popup-link {
    display: flex;
    width: 6.2rem;
    height: 6.2rem;
    padding: 1.6rem;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    position: absolute;
    right: 2rem;
    top: 2rem;
    border-radius: 6rem;
    background: var(--Color-Surface-Bold, #03231b);
    color: #fff;
}

@media (max-width: 768px) {
    .static-card-popup-link {
        width: 3.1rem;
        height: 3.1rem;
        padding: 0.8rem;
        gap: 0.4rem;
        right: 1rem;
        top: 1rem;
        border-radius: 6rem;
    }
}

/* General styles for card-grid */
.card-widget.card-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 3.2rem;
    /* consistent with var(--Spacing-2XL) if needed */
    min-width: 100%;
/*     padding:0 4rem; */
    box-sizing: border-box;
    align-items: stretch;
	align-content:center;
}

@media (max-width: 768px) {
    .card-widget.card-grid {
        gap: 1.6rem;
        /* consistent with var(--Spacing-2XL) if needed */
/*         padding:0 2rem; */
		flex-direction:column;
    }
}

/* General styles for card-widget */
.card-scrollable {
    display: flex;
    gap: 3.2rem;
    overflow-x: auto;
    /* Enable horizontal scrolling */
/*     padding:0 4rem; */
    scroll-behavior: smooth;
    /* Smooth scrolling */
    width: 100%;
    /* Ensure the container spans the full width */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: thin;
    /* Firefox */
    user-select: none;
	cursor: grab;
	cursor: -webkit-grab;
}
.card-scrollable.active {
  cursor: grabbing;           /* Show "grabbing" hand while dragging */
  cursor: -webkit-grabbing;   /* For Safari */
  scroll-behavior: auto;      /* Disable smooth scroll during drag for better control */
}

@media (max-width: 768px) {
   .card-scrollable {
        gap: 1.6rem;
/*         padding:0 2rem; */
    }
}

.card-widget.card-scrollable::-webkit-scrollbar {
/*     display: none; */
    /* Single scrollbar height */
}

/* General styles for card-stack */
.card-widget.card-stack {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    /* space between stacked cards */
    padding:0 4rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .card-widget.card-stack {
        gap: 1.6rem;
        /* space between stacked cards */
        padding:0 2rem;
    }
}

.card-widget.card-scrollable .static-card-item {
    flex: 0 0 auto;
    /* Prevent cards from growing or shrinking */
    overflow: hidden;
    user-select: none;
}

/* Layout 1 */

.static-card-item.static-card-layout1 {
 
   display: flex;
   width: 40rem;
   padding: 4rem 3.2rem;
   flex-direction: column;
   gap: 0.8rem;
   background: #E8E8E8;
}
 
.static-card-item.static-card-layout1 .red-dot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    align-self: stretch;
}
 
.static-card-full-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    align-self: stretch;
}
 
.static-card-item.static-card-layout1 .static-card-image {
   display: flex;
    width: 25.6rem;
    height: 25.6rem;
    padding: 2.7259rem 3.4556rem 2.6074rem 3.5556rem;
    justify-content: center;
    align-items: center;
}
 
.static-card-item.static-card-layout1 .static-card-image img {
    max-width: 100%;
    max-height: 100%;
    width: 18.4889rem;
    height: 20.2667rem;
    object-fit: cover;
}
 
.static-card-item.static-card-layout1 .static-card-content {
  display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2.4rem;
   align-self: stretch;
}
 
.static-card-item.static-card-layout1 .static-card-content h2 {
    align-self: stretch;
    color: #000;
}
 
.static-card-item.static-card-layout1 .static-card-content .static-card-text{
display: flex;
justify-content: center;
align-items: center;
gap: 0.8rem;
align-self: stretch;
}
 
.static-card-item.static-card-layout1 .static-card-content p {
    color: var(--Color-Content-Tertiary, #6B6B6B);
}

/* .static-card-item.static-card-layout1 {
    display: flex;
    flex-direction: column;
    width: 38.4rem;
     min-height: 57.1rem; 
	gap:4rem;
    background-color: #e8e8e8;
    color: #000000;
    position: relative;
} */

/* Top part (red dot + image) */
/* .static-card-item.static-card-layout1 .static-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 4rem;
} */

/* Red dot positioning */
/* .static-card-item.static-card-layout1 .red-dot {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 2.4rem;
    height: 2.4rem;
} */

/* Image inside .static-card-image */
/* .static-card-item.static-card-layout1 .static-card-image img {
    max-width: 100%;
    max-height: 100%;
    width: 21.9516rem;
    height: 21.9516rem;
    object-fit: contain;
}

.static-card-item.static-card-layout1 .static-card-content {
    display: flex;
    width: 100%;
    padding: 0 3.2rem 4rem 3.2rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
} */

/* .static-card-item.static-card-layout1 .static-card-content h2{
    color: #000;
 	    
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.5em;
    height: 4.5em;

} */

/* @media (max-width: 768px) {
    .static-card-item.static-card-layout1 {
        width: 24rem;
        min-height: 30rem; 
		gap:2rem;
    }


    .static-card-item.static-card-layout1 .red-dot {
        top: 1rem;
        right: 1rem;
        width: 1.2rem;
        height: 1.2rem;
    }


    .static-card-item.static-card-layout1 .static-card-image img {
        width: 10.9516rem;
        height: 10.9516rem;
    }

    .static-card-item.static-card-layout1 .static-card-content {
        padding: 0 1.6rem 2rem 1.6rem;
        gap: 1.2rem;
    }
} */
@media (max-width: 768px) {
    .static-card-item.static-card-layout1 {
        width: 23.4576rem;
        padding: 2.4rem 2rem;
        align-items: flex-end;
        gap: 0.4rem;
        position: relative;
    }
    .static-card-item.static-card-layout1 .red-dot
{
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
    right: 2.2rem;
    top: 2.6rem;
    }
 
.static-card-full-content{
    gap: 2.4rem;
}
 
.static-card-item.static-card-layout1 .static-card-image{
   width: 12.8rem;
    height: 12.8rem;
    padding: 0rem 0.3186rem;
}
 
.static-card-item.static-card-layout1 .static-card-content
{
        gap: 1.4699rem;
    }

}

/* Layout 2 */
.static-card-item.static-card-layout2 {
    background: var(--Color-Surface-Subtle, #f4f4f4);
    display: flex;
    padding: var(--Spacing-5XL, 6.4rem) 2.4686rem;
    flex-direction: column;
    align-items: center;
    gap: 16.2514rem;
    flex: 1 0 0;
}

.static-card-item.static-card-layout2 .static-card-title {
    display: flex;
    padding-right: 3.2rem;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    align-self: stretch;
}

.static-card-item.static-card-layout2 .static-card-title h2 {
    flex: 1 0 0;
    color: var(--Text-primary, #111614);
    text-align: center;
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout2 {
        padding: 1.6rem 1.6rem;
        gap: 8.2514rem;
		min-width:100%;
    }

    .static-card-item.static-card-layout2 .static-card-title {
        padding-right: 1.6rem;
        gap: 1.2rem;
    }
}

/* Layout 3 */
.static-card-item.static-card-layout3 {
    background: var(--Color-Surface-Subtle, #f4f4f4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* this is for content inside the card */
    padding: 2.4686rem;

    min-width: 30rem;
    flex: 1 1 30rem;
    /* allow cards to grow/shrink as needed */
}

.static-card-item.static-card-layout3 .static-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    gap:4rem;
    align-self: stretch;
}

.static-card-item.static-card-layout3 .static-card-title {
    display: flex;
    padding-right: 3.2rem;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    align-self: stretch;
}

.static-card-item.static-card-layout3 .static-card-text {
    display: flex;
    padding-right: 4rem;
    align-items: flex-start;
    gap: 2rem;
    align-self: stretch;
}

.static-card-item.static-card-layout3 .static-card-title h2 {
    flex: 1 0 0;
    color: var(--Text-primary, #111614);
}

.static-card-item.static-card-layout3 .static-card-text h4 {
    color: var(--Color-Content-Tertiary, #6B6B6B);
	font-family: var(--Type-Body-M-Body-1-Family, Involve);
	font-size: 2rem;
	font-style: normal;
	font-weight: var(--Type-Body-M-Body-1-Weight, 500);
	line-height: 130%; /* 26px */
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout3 .static-card-content {
		gap:2rem;
    }

    .static-card-item.static-card-layout3 .static-card-title {
        padding-right: 1.6rem;
        gap: 1.2rem;
    }

    .static-card-item.static-card-layout3 .static-card-text {
        padding-right: 2rem;
        gap: 1rem;
    }
}

/* Layout 4 */
.static-card-item.static-card-layout4 {
    display: flex;
    justify-content: space-between;
    max-width: 136rem;
    max-height: 38rem;
    justify-content: space-between;
    background: var(--Color-Surface-Subtle, #f4f4f4);
}

.static-card-item.static-card-layout4 .static-card-content {
    display: flex;
    padding: 3.2rem 4rem 3.2rem 2.4rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    max-width: 43.2rem;
}

.static-card-item.static-card-layout4 .static-card-image {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.static-card-item.static-card-layout4 .static-card-image img {
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}

.static-card-item.static-card-layout4 .static-card-content span {
    flex: 1 0 0;
    color: var(--Text-primary, #26251a);
}

.static-card-item.static-card-layout4 .static-card-content h3 {
    align-self: stretch;
    color: var(--Text-primary, #111614);
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout4 {
        max-width: 70rem;
		flex-direction: column;
        /*max-height: 20rem; */
 	}

    .static-card-item.static-card-layout4 .static-card-content {
        padding: 1.6rem 2rem 1.6rem 1.2rem;
        max-width: 22rem;
    }
}

/* Layout 5 */
.static-card-item.static-card-layout5 {
    display: flex;
    justify-content: space-between;
    max-width: 136rem;
	max-height: 45rem; 
    justify-content: space-between;
/*     gap: var(--Spacing-2XL, 32px); */
	gap: 16px;
    /*   background: var(--Color-Surface-Subtle, #f4f4f4); */
}

.static-card-item.static-card-layout5 .static-card-content {
    display: flex;
    max-width: 43.2rem;
    padding: 3.2rem 4rem 3.2rem 2.4rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    background: var(--Color-Surface-Subtle, #f4f4f4);
}

.static-card-item.static-card-layout5 .static-card-image {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.static-card-item.static-card-layout5 .static-card-image img {
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}

.static-card-item.static-card-layout5 .static-card-content h2 {
    flex: 1 0 0;
    color: var(--Text-primary, #111614);
}

.static-card-item.static-card-layout5 .static-card-content p {
    align-self: stretch;
    color: var(--Text-primary, #111614);
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout5 {
        max-width: 70rem;
		flex-direction: column;
/*         max-height: 20rem; */
    }
	.static-card-item.static-card-layout5 .static-card-image img {
		max-height: 20rem;
	}
    .static-card-item.static-card-layout5 .static-card-content {
        min-width: 100%;
		gap: 3.2rem;
        padding: 1.6rem 2rem 1.6rem 1.2rem;
    }
}

/* Layout 6 */
.static-card-item.static-card-layout6 {
    display: flex;
    flex-direction: row;
}

.static-card-item.static-card-layout6 .static-card-image {
    display: flex;
    width: 26.1714rem;
    height: 22.9rem;
    justify-content: center;
    gap: 0.8rem;
    flex-shrink: 0;
    align-self: stretch;
    aspect-ratio: 261.71/229;
}

.static-card-item.static-card-layout6 .static-card-content-container {
    display: flex;
    padding: var(--Spacing-3XL, 4rem) var(--Spacing-4XL, 4.8rem);
    flex-direction: row;
    align-items: center;
    gap: 3.2rem;
    flex: 1 0 0;
    background: var(--BG-secondary, #f4f4f4);
    justify-content: space-between;
}

.static-card-item.static-card-layout6 .static-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.static-card-item.static-card-layout6 .static-card-content h2 {
    color: #000;
    align-self: stretch;
}

.static-card-item.static-card-layout6 .static-card-content h4 {
    color: var(--Text-tertiary, #4d4d4d);
    align-self: stretch;
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout6 .static-card-image {
        width: 13.1714rem;
        height: 12rem;
        align-self: center;
    }

    .static-card-item.static-card-layout6 .static-card-content-container {
        padding: 2rem 2.4rem;
        flex-direction: column;
        gap: 1.6rem;
        align-items: flex-start;
    }

    .static-card-item.static-card-layout6 .static-card-content {
        gap: 0.4rem;
    }
}

/* Layout 7 */
.static-card-item.static-card-layout7 {
    display: flex;
    width: 52rem;
    /* height: 37.8rem; */
    padding: 2.4686rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    position: relative;
    background: var(--Color-Surface-Subtle, #f4f4f4);
}

.static-card-item.static-card-layout7 .static-card-content {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    gap:16rem;
}

.static-card-item.static-card-layout7 .static-card-title {
    display: flex;
    padding-right: 8rem;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.static-card-item.static-card-layout7 .static-card-title h1 {
    flex: 1 0 0;
    color: var(--Color-Content-Primary, #0d0d0d);
	
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.5em;
    height: 4.5em; /* 1.5em * 3 lines */

}

.static-card-item.static-card-layout7 .static-card-content p {
    align-self: stretch;
    color: var(--Color-Content-Primary, #0d0d0d);
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout7 .static-card-content{
        gap:8rem;
    }
    .static-card-item.static-card-layout7 {
        width: 27rem;
        /* height: 20rem; */
        padding: 1.2686rem;
    }

    .static-card-item.static-card-layout7 .static-card-title {
        padding-right: 4rem;
        gap: 4px;
    }
}

/* Layout 8 */
.static-card-item.static-card-layout8 {
    display: flex;
    width: 48rem;
    padding: 2.4rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem;
    background: var(--Color-Surface-Subtle, #f4f4f4);
}

.static-card-item.static-card-layout8 .static-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    gap:4rem;
	justify-content:space-between;
}

.static-card-item.static-card-layout8 .static-card-title {
    display: flex;
    padding-right: 8px;
    align-items: center;
    gap: 2.4rem;
    align-self: stretch;
}

.static-card-item.static-card-layout8 .static-card-title h2 {
    color: #000;
    
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 120%;
    

}

.static-card-item.static-card-layout8 .static-card-content p {
    color: var(--Text-primary, #111614);
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout8 .static-card-content{
        gap:32px;

    }
    .static-card-item.static-card-layout8 {
        width: 280px;
        padding: 20px 16px;
        gap: 3.2rem;
    }

    .static-card-item.static-card-layout8 .static-card-title {
        padding-right: 24px;
        gap: 1.2rem;
		color: var(--Color-Content-Primary, #0D0D0D);

    }

    .static-card-item.static-card-layout8 .static-card-content p {
    	color: var(--Color-Content-Secondary, #363636);
    }
}

/* Layout 9 */
.static-card-item.static-card-layout9 {
    display: flex;
    /* 	width: 1360px;
	height: 299px;*/
	padding: var(--Spacing-4XL, 48px) var(--Spacing-3XL, 40px);
    flex-direction: column;
    align-items: flex-start;
    gap: 6.4rem;
    background: var(--BG-secondary, #f4f4f4);
}

.static-card-item.static-card-layout9 .static-card-content-container {
    display: flex;
    align-items: center;
    gap: var(--Spacing-5XL, 6.4rem);
    align-self: stretch;
}

.static-card-item.static-card-layout9 .static-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-L, 2rem);
    flex: 1 0 0;
}

.static-card-item.static-card-layout9 .static-card-content h2 {
    color: #000;
    align-self: stretch;
}

.static-card-item.static-card-layout9 .static-card-content p {
    color: var(--Text-primary, #111614);
    align-self: stretch;
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout9 {
        padding: 3.2rem;
        gap: 3.2rem;
    }

    .static-card-item.static-card-layout9 .static-card-content-container {
        flex-direction: column;
        gap: 3.2rem;
		align-items: flex-start;
    }

    .static-card-item.static-card-layout9 .static-card-content {
        gap: 3.2rem;
    }
	
	.static-card-item.static-card-layout9 .static-card-external-button {
        display: flex;
        height: 4rem;
        padding: 0rem 1.6rem;
        align-items: center;
        gap: 0.8rem;
    }
	
	.static-card-item.static-card-layout9 .static-card-external-button img,
	.static-card-item.static-card-layout9 .static-card-external-button i {
        width: 1.6rem;
        height: 1.6rem;
    }
}

/* Layout 10 */
.static-card-item.static-card-layout10 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* this is for content inside the card */
    gap: 16.2514rem;
    background: var(--Color-Surface-Subtle, #F4F4F4);
    padding: 4rem;

    min-width: 30rem;
    flex: 1 1 30rem;
    /* allow cards to grow/shrink as needed */
}

.static-card-item.static-card-layout10 .static-card-content {
    display: flex;
    padding-right: 4rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.8rem;
    align-self: stretch;
}

.static-card-item.static-card-layout10 .static-card-content h3 {
    color: #000;
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout10 {
        min-width: 15rem;
        min-height: 11rem;
        padding: 2rem;
        gap: 8.2514rem;
    }

    .static-card-item.static-card-layout10 .static-card-content {
        padding-right: 2rem;
        gap: 0.8rem;
    }
}

/* Layout 11 */
.static-card-item.static-card-layout11 {
    display: flex;
    width: 48rem;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    position: relative;
    background: var(--Color-Surface-Subtle, #f4f4f4);
	height:100%;
}

a.static-card-popup-link-layout11 {
    display: flex;
    width: 6.2rem;
    height: 6.2rem;
    padding: 1.6rem;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 6rem;
    background: #fff;
}

.static-card-item.static-card-layout11 .static-card-image {
    display: flex;
    height: 36rem;
    align-items: center;
    gap: 0.8rem;
    align-self: stretch;
}

.static-card-item.static-card-layout11 .static-card-image img {
    height: 36rem;
    width: 100%;
}

.static-card-item.static-card-layout11 .static-card-content {
    display: flex;
    padding: 2.4686rem;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap:4rem;
	height: 100%;
    justify-content: space-between;
}

.static-card-item.static-card-layout11 .static-card-title {
    display: flex;
	padding-right: 3.2rem;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    align-self: stretch;
}

.static-card-item.static-card-layout11 .static-card-title h1 {
/*  color: #000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.5em; */
	color: var(--Text-primary, #111614);
	font-family: var(--Type-Header-Header-1-Family, Involve);
	font-size: var(--Type-Header-Header-1-Size, 4.8rem);
	font-style: normal;
	font-weight: var(--Type-Header-Header-1-Weight, 500);
	line-height: 120%; 
/*     height: 4.5em; 1.5em * 3 lines */

}

.static-card-item.static-card-layout11 .static-card-content p {
    color: var(--Color-Content-Tertiary, #6B6B6B);
}

@media (max-width: 768px) {

	.static-card-item.static-card-layout11 .static-card-title h1 {
		color: var(--Text-primary, #26251A);
		font-size: var(--Type-Header-Header-2-Size, 24px);
		font-style: normal;
		font-weight: var(--Type-Header-Header-2-Weight, 500);
		line-height: 120%; /* 28.8px */
		letter-spacing: -0.24px; 
	}
	
	.static-card-item.static-card-layout11 .static-card-title{
		padding-right: 2.2716rem;
	}
	
	
	.static-card-item.static-card-layout11 .static-card-content p{
		color: var(--Color-Content-Tertiary, #6B6B6B);
	}

    .static-card-item.static-card-layout11 .static-card-content {
        padding: 2rem 1.6rem;
        gap:3.2rem;
    }

    .static-card-item.static-card-layout11 .static-card-image {
        height: 18rem;
    }

    .static-card-item.static-card-layout11 .static-card-image img {
        height: 18rem;
    }

    a.static-card-popup-link-layout11 {
        width: 3.2rem;
        height: 3.2rem;
        padding: 1rem;
        right: 10px;
        top: 10px;
    }

    .static-card-item.static-card-layout11 {
        width: 26.4rem;
    }
}
/* Layout 12 */
.static-card-item.static-card-layout12 {
    display: flex;
    width: 48rem;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    position: relative;
    background: var(--Color-Surface-Subtle, #f4f4f4);
}

.static-card-item.static-card-layout12 .static-card-image {
    display: flex;
    height: 37.9rem;
    align-items: center;
    gap: 0.8rem;
    align-self: stretch;
}

.static-card-item.static-card-layout12 .static-card-image img {
    height: 37.9rem;
    width: 100%;
}

.static-card-item.static-card-layout12 .static-card-content {
    display: flex;
    padding: 2.4686rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.static-card-item.static-card-layout12 .static-card-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
}

.static-card-item.static-card-layout12 .static-card-title h2 {
    color: #000;
}

@media (max-width: 768px) {
    
    .static-card-item.static-card-layout12 .static-card-content {
        padding: 1.4686rem;
    }

    .static-card-item.static-card-layout12 .static-card-image {
        height: 27.9rem;
    }

    .static-card-item.static-card-layout12 .static-card-image img {
        height: 27.9rem;
    }

    .static-card-item.static-card-layout12 {
        width: 24rem;
    }
}

/* Layout 13 */
.static-card-item.static-card-layout13 {
    display: flex;
    flex-direction: row;
    gap: 5rem;
    padding-bottom: 3.2rem;
    border-bottom: 1px solid var(--Separator-primary, #C0C0C0);
}

.static-card-item.static-card-layout13 .static-card-image {
    display: flex;
    width: 17.6rem;
    height: 12.8rem;
    justify-content: center;
    gap: 0.8rem;
    flex-shrink: 0;
    align-self: stretch;
    aspect-ratio: 261.71/229;
}

.static-card-item.static-card-layout13 .static-card-content-container {
    display: flex;
    /* padding: var(--Spacing-3XL, 4rem) var(--Spacing-4XL, 4.8rem); */
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    flex: 1 0 0;
    justify-content: space-between;
}

.static-card-item.static-card-layout13 .static-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.static-card-item.static-card-layout13 .static-card-content h3 {
    color: #000;
    align-self: stretch;
}

.static-card-item.static-card-layout13 .static-card-content span {
    color: var(--Text-tertiary, #6b6b6b);
    align-self: stretch;
}

@media (max-width: 768px) {
    .static-card-item.static-card-layout13 .static-card-image {
        width: 13.1714rem;
        height: 12rem;
        align-self: center;
    }

    .static-card-item.static-card-layout13 .static-card-content-container {
        padding: 2rem 2.4rem;
        flex-direction: column;
        gap: 1.6rem;
        align-items: flex-start;
    }

    .static-card-item.static-card-layout13 .static-card-content {
        gap: 0.4rem;
    }
}

/* Layout 14 */
.static-card-item.static-card-layout14 {
    display: flex;
    width: 48rem;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    position: relative;
    gap:3.2rem;
    max-width: 296px;
    margin-right: 1.9rem;
    /* background: var(--Color-Surface-Subtle, #f4f4f4); */
}

.static-card-item.static-card-layout14 .static-card-image {
    width: 96px;
    height: 69.818px;
}

.static-card-item.static-card-layout14 .static-card-image img {
    height: 100%;
    width: 100%;
}


.static-card-item.static-card-layout14 .static-card-content-container {
    display:flex;
    justify-content: space-between;
    width:100%
    
}
.static-card-item.static-card-layout14 .static-card-content {
    display: flex;
    /* padding: 2.4686rem; */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    height:100%;
    gap:1.2rem
}

.static-card-item.static-card-layout14 .static-card-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
}

.static-card-item.static-card-layout14 .static-card-title h3 {
    color: var(--Color-Content-Primary, #0D0D0D);
}

/* layout 15*/
.static-card-item.static-card-layout15 {
    max-width: 300px;
	width:300px;
	height:184px;
	display: flex;
    padding: 20px 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    background: var(--Color-Buttons-Background-Secondary-Idle, #F4F4F4);
}
.static-card-item.static-card-layout15 .static-card-content{
	display: flex;
    height: 100%;
    width:100%;
	flex-direction: inherit;
    justify-content: space-between;
	
}
.static-card-item.static-card-layout15 .static-card-title{
    display: flex;
    align-items: flex-start;
	justify-content: space-between;
    gap: 24px;
    align-self: stretch;
    overflow: hidden;
}
.static-card-item.static-card-layout15 .static-card-title h3{
/* 	width: 75%;
	overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.5em;
    height: 4.5em; /* 1.5em * 3 lines */ 
}
.static-card-item.static-card-layout15 .department {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #2863B8;
}
.static-card-item.static-card-layout15 .static-card-external-link{
	width:24px;
	height:24px;
	flex-shrink:0;
}



/* Popup Container */
.static-card-popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* semi-transparent black background */
    display: none; /* hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Show when active */
.static-card-popup-container.active {
    display: flex;
}

/* Popup Content Box */
.static-card-popup-content {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    position: relative; /* relative so the close button can be positioned inside */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Close Button */
.static-card-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}

.static-card-popup-close:hover {
    color: #000;
}