.cards {
    position: relative;
    z-index: 1;
}

/* Recent posts widget container - ensure proper stacking context */
.recent-posts-widget {
    position: relative;
    z-index: 1;
}

/* Hide widget until fully loaded - prevents flash of unstyled content */
.recent-posts-widget .elfsight-app-77ce753d-c45c-454e-b4aa-3c1f83345e35 {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* Show widget when carousel is initialized */
.recent-posts-widget .swiper-initialized {
    opacity: 1;
}

/* Show widget container when it has initialized carousel */
.recent-posts-widget .elfsight-app-77ce753d-c45c-454e-b4aa-3c1f83345e35:has(.swiper-initialized) {
    opacity: 1;
}

/* Carousel outer container - ensure arrows can overlay */
.recent-posts-widget .Carousel__CarouselOuter-sc-f2ox7y-1,
.recent-posts-widget .es-carousel-outer {
    position: relative;
}

.cards__headlines {
    margin-bottom: 20px;
    text-align: center;
}

.cards__headlines :last-child {
    margin-bottom: 0;
}

.cards__bttn .btn-group {
    margin-top: 25px;
    margin-bottom: 0;
}

.bg-dark-blue .cards__title h2 {
    color: rgba(228, 239, 250, 0.85);
}

.card-slider {
    margin: 0 -39px;
    padding-bottom: 76px;
}

.card-item {
    padding: 0 17px;
}

.card {
    display: block;
    width: 290px;
    border-radius: 10px;
    background: #F8F8F8;
    border: none;
}

.card__top {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card__author__image {
    width: 31px;
    height: 31px;
}

.card__author__image img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.card__author__title {
    position: relative;
    color: #2D2926;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}

.card__author__title span {
    display: block;
    color: #565656;
    font-size: 12px;
    font-weight: 400;
}

.verified {
    position: absolute;
    right: -17px;
    top: 3px;
}

.card__social {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: #0077B5;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
}

.card__details {
    padding: 0 20px;
}

.card__description {
    color: #111;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
}

.card__cta {
    color: #565656;
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    display: block;
}

.card__image {
    margin-top: 20px;
    height: 186px;
}

.card__bottom {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card__comment {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card__comment__like,
.card__share {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #565656;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

.card-slider .slick-arrow {
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    font-size: 0;
    background: #2470BB;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-slider .slick-prev {
    left: 50%;
    margin-left: -64px;
}

.card-slider .slick-next {
    right: 50%;
    margin-right: -64px;
}

.card-slider .slick-arrow::before {
    font-family: 'perritt-icon';
    line-height: 1em;
    font-size: 18px;
}

.card-slider .slick-prev::before {
    content: '\e901';
}

.card-slider .slick-next::before {
    content: '\e902';
}

.cards__bg {
    position: absolute;
    max-width: inherit;
    width: 1920px;
    left: 0;
    bottom: 0;
    z-index: -1;
    height: 100%;
    object-fit: cover;
}

.cards .btn-primary {
    background: #3B8686;
    color: #FFFFFF;
}



@media (min-width: 768px) {
    .cards__headlines {
        margin-bottom: 0;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cards__headlines .btn-group {
        margin-top: 0;
        margin-bottom: 0;
    }

    .card-slider {
        margin: 0 -313px;
        padding-bottom: 140px;
    }

    .card-slider .slick-dots {
        bottom: 94px;
    }
}


@media (min-width: 1200px) {
    .card-slider {
        margin: 0 -17px;
        padding-bottom: 46px;
    }

    .card-slider .slick-dots {
        bottom: 0;
    }

    .card {
        width: 100%;
    }

    .card-slider .slick-arrow {
        bottom: auto;
        top: 50%;
        margin-top: -16px;
        width: 32px;
        height: 32px;
        background: rgba(34, 34, 34, 0.25);
        z-index: 1;
    }

    .card-slider .slick-arrow::before {
        font-size: 12px;
    }

    .card-slider .slick-prev {
        left: 32px;
        margin-left: 0;
    }

    .card-slider .slick-next {
        right: 32px;
        margin-right: 0;
    }

    .card-slider .slick-arrow:hover {
        background: rgba(34, 34, 34, 0.8);
    }

    .cards__bg {
        width: 100%;
    }

    .cards--homepage {
        padding: 100px 0 184px;
    }

    .cards .btn-primary:hover {
        background: #244E4E;
        color: #FFFFFF;
    }

}

/* Hide Elfsight Branding - Nuclear option with maximum specificity */

/* Target the badge link - multiple approaches */
a[href*="elfsight.com"][href*="linkedin-feed-widget"],
a[href*="utm_campaign=free-widget"],
a[href*="elfsight.com"][target="_blank"][rel="noreferrer"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -1 !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* High specificity for widget containers */
.cards .recent-posts-widget a[href*="elfsight.com"],
.cards a[href*="elfsight.com"],
.recent-posts-widget a[href*="elfsight.com"],
.eapps-widget a[href*="elfsight.com"],
section.cards a[href*="elfsight.com"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Catch any elfsight link elements */
[href*="elfsight.com/linkedin-feed-widget"],
[href*="utm_source=websites"][href*="elfsight"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* Slider Dots - Match Figma Design */
/* Target Elfsight BulletsControl container */
.recent-posts-widget .BulletsControl__BulletsControlContainer-sc-vxd05w-0,
.recent-posts-widget .es-bullets-control-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 16px !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
}

.recent-posts-widget .BulletsControl__BulletsControlInner-sc-vxd05w-1,
.recent-posts-widget .es-bullets-control-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    transform: none !important;
    width: auto !important;
}

/* Individual dot styling - all dots same size */
/* Target all possible class variations */
.recent-posts-widget .BulletsControl__BulletsControlItem-sc-vxd05w-2,
.recent-posts-widget .es-bullets-control-item,
.recent-posts-widget .gOeIwK,
.recent-posts-widget .bRwDzQ,
.recent-posts-widget .hcwFqj,
.recent-posts-widget .ktdhQA {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    border-radius: 50% !important;
    background-color: rgba(91, 116, 136, 0.5) !important;
    /* Darker blue/gray - inactive */
    border: none !important;
    padding: 0 !important;
    margin: 0 5px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    transform: none !important;
    scale: 1 !important;
}

/* Active/selected dot - same size, just different color */
.recent-posts-widget .BulletsControl__BulletsControlItem-sc-vxd05w-2.es-bullets-control-item-active,
.recent-posts-widget .es-bullets-control-item.es-bullets-control-item-active,
.recent-posts-widget .ktdhQA {
    background-color: rgba(173, 199, 218, 0.8) !important;
    /* Light blue/gray - active */
    width: 20px !important;
    height: 20px !important;
    transform: none !important;
    scale: 1 !important;
}

/* Hover state for dots */
.recent-posts-widget .BulletsControl__BulletsControlItem-sc-vxd05w-2:hover,
.recent-posts-widget .es-bullets-control-item:hover {
    background-color: rgba(173, 199, 218, 0.6) !important;
}

/* Limit to only 5 visible dots */
.recent-posts-widget .BulletsControl__BulletsControlItem-sc-vxd05w-2:nth-child(n+6),
.recent-posts-widget .es-bullets-control-item:nth-child(n+6) {
    display: none !important;
}

/* Note: Arrow disabled states are now handled in the main arrow positioning section below */

.bg-navy .es-carousel-layout-item a,
.bg-dark-blue .es-carousel-layout-item a {
    color: #2D2926;
}

/* Elfsight Carousel Arrow Positioning - Center Vertically */
/* Force both arrows to ALWAYS be visible with maximum specificity */
/* Important: Override any Elfsight default hiding during load */
.recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9,
.recent-posts-widget .es-carousel-arrow-control-container,
.recent-posts-widget div[class*="Carousel__CarouselArrowControlContainer"],
.recent-posts-widget div[class*="es-carousel-arrow-control-container"],
.recent-posts-widget [role="button"][aria-label="Previous"],
.recent-posts-widget [role="button"][aria-label="Next"] {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999 !important;
    margin: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 32px !important;
    height: 32px !important;
    transition: none !important;
}

/* Left arrow - move towards center and FORCE visibility */
.recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9:first-of-type,
.recent-posts-widget .es-carousel-arrow-control-container:first-of-type,
.recent-posts-widget div[class*="Carousel__CarouselArrowControlContainer"]:first-of-type,
.recent-posts-widget div[class*="es-carousel-arrow-control-container"]:first-of-type,
.recent-posts-widget [role="button"][aria-label="Previous"] {
    left: 10px !important;
    display: flex !important;
    visibility: visible !important;
}

/* Right arrow - move towards center and FORCE visibility */
.recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9:last-of-type,
.recent-posts-widget .es-carousel-arrow-control-container:last-of-type,
.recent-posts-widget div[class*="Carousel__CarouselArrowControlContainer"]:last-of-type,
.recent-posts-widget div[class*="es-carousel-arrow-control-container"]:last-of-type,
.recent-posts-widget [role="button"][aria-label="Next"] {
    right: 10px !important;
    display: flex !important;
    visibility: visible !important;
}

/* Arrow control button styling */
/* Ensure arrows are always visible from page load */
.recent-posts-widget .ArrowControl__ArrowControlContainer-sc-ps7sz3-0,
.recent-posts-widget .es-carousel-arrow-control,
.recent-posts-widget div[class*="ArrowControl__ArrowControlContainer"],
.recent-posts-widget div[class*="es-carousel-arrow-control"] {
    background-color: rgba(34, 34, 34, 0.5) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.recent-posts-widget .ArrowControl__ArrowControlContainer-sc-ps7sz3-0:hover,
.recent-posts-widget .es-carousel-arrow-control:hover,
.recent-posts-widget div[class*="ArrowControl__ArrowControlContainer"]:hover,
.recent-posts-widget div[class*="es-carousel-arrow-control"]:hover {
    background-color: rgba(34, 34, 34, 0.8) !important;
}

/* SVG Arrow Icons - Force Visibility - ALWAYS FULL OPACITY */
/* No transitions or animations - visible immediately on page load */
.recent-posts-widget .ArrowControl__ArrowControlContainer-sc-ps7sz3-0 svg,
.recent-posts-widget .es-carousel-arrow-control svg,
.recent-posts-widget div[class*="ArrowControl__ArrowControlContainer"] svg,
.recent-posts-widget div[class*="es-carousel-arrow-control"] svg,
.recent-posts-widget .Icon__IconContainer-sc-11wrh3u-0 svg,
.recent-posts-widget div[class*="Icon__IconContainer"] svg,
.recent-posts-widget .ArrowControl__ArrowControlIcon-sc-ps7sz3-1 svg,
.recent-posts-widget div[class*="ArrowControl__ArrowControlIcon"] svg,
.recent-posts-widget [role="button"][aria-label="Previous"] svg,
.recent-posts-widget [role="button"][aria-label="Next"] svg,
.recent-posts-widget [aria-hidden="true"] svg,
.recent-posts-widget [aria-hidden="false"] svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 14px !important;
    height: 14px !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
    pointer-events: none !important;
    transition: none !important;
    animation: none !important;
}

/* SVG Paths inside arrows - ALWAYS FULL OPACITY */
/* No transitions or animations - visible immediately on page load */
.recent-posts-widget .ArrowControl__ArrowControlContainer-sc-ps7sz3-0 svg path,
.recent-posts-widget .es-carousel-arrow-control svg path,
.recent-posts-widget div[class*="ArrowControl__ArrowControlContainer"] svg path,
.recent-posts-widget div[class*="es-carousel-arrow-control"] svg path,
.recent-posts-widget [role="button"][aria-label="Previous"] svg path,
.recent-posts-widget [role="button"][aria-label="Next"] svg path,
.recent-posts-widget [aria-hidden="true"] svg path,
.recent-posts-widget [aria-hidden="false"] svg path {
    fill: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
}

/* Icon containers inside arrows - ALWAYS FULL OPACITY */
/* No transitions or animations - visible immediately on page load */
.recent-posts-widget .Icon__IconContainer-sc-11wrh3u-0,
.recent-posts-widget div[class*="Icon__IconContainer"],
.recent-posts-widget .ArrowControl__ArrowControlIcon-sc-ps7sz3-1,
.recent-posts-widget div[class*="ArrowControl__ArrowControlIcon"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 14px !important;
    height: 14px !important;
    pointer-events: none !important;
    transition: none !important;
    animation: none !important;
}

/* Disabled arrow states - when aria-hidden="true" */
/* Hide left/previous arrow when aria-hidden="true" (at beginning) */
.recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9[aria-hidden="true"]:first-of-type,
.recent-posts-widget .es-carousel-arrow-control-container[aria-hidden="true"]:first-of-type,
.recent-posts-widget div[class*="Carousel__CarouselArrowControlContainer"][aria-hidden="true"]:first-of-type,
.recent-posts-widget div[class*="es-carousel-arrow-control-container"][aria-hidden="true"]:first-of-type,
.recent-posts-widget [role="button"][aria-label="Previous"][aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide right/next arrow when aria-hidden="true" (at end) */
.recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9[aria-hidden="true"]:last-of-type,
.recent-posts-widget .es-carousel-arrow-control-container[aria-hidden="true"]:last-of-type,
.recent-posts-widget div[class*="Carousel__CarouselArrowControlContainer"][aria-hidden="true"]:last-of-type,
.recent-posts-widget div[class*="es-carousel-arrow-control-container"][aria-hidden="true"]:last-of-type,
.recent-posts-widget [role="button"][aria-label="Next"][aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Show arrows when aria-hidden="false" */
.recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9[aria-hidden="false"],
.recent-posts-widget .es-carousel-arrow-control-container[aria-hidden="false"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* No additional styling needed - both arrows are hidden at their boundaries */

/* When first dot is active, HIDE left arrow completely */
.recent-posts-widget:has(.es-bullets-control-item:first-child.es-bullets-control-item-active) .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9:first-of-type,
.recent-posts-widget:has(.es-bullets-control-item:first-child.es-bullets-control-item-active) .es-carousel-arrow-control-container:first-of-type,
.recent-posts-widget:has(.es-bullets-control-item:first-child.es-bullets-control-item-active) div[class*="Carousel__CarouselArrowControlContainer"]:first-of-type,
.recent-posts-widget:has(.es-bullets-control-item:first-child.es-bullets-control-item-active) [role="button"][aria-label="Previous"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* No additional styling needed - left arrow is hidden on first slide */

/* When last visible dot (5th) is active, HIDE right arrow completely */
.recent-posts-widget:has(.es-bullets-control-item:nth-child(5).es-bullets-control-item-active) .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9:last-of-type,
.recent-posts-widget:has(.es-bullets-control-item:nth-child(5).es-bullets-control-item-active) .es-carousel-arrow-control-container:last-of-type,
.recent-posts-widget:has(.es-bullets-control-item:nth-child(5).es-bullets-control-item-active) div[class*="Carousel__CarouselArrowControlContainer"]:last-of-type,
.recent-posts-widget:has(.es-bullets-control-item:nth-child(5).es-bullets-control-item-active) [role="button"][aria-label="Next"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Responsive adjustments */
@media (min-width: 768px) {
    /* Move arrows further towards center on tablets */
    .recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9:first-of-type,
    .recent-posts-widget .es-carousel-arrow-control-container:first-of-type {
        left: 20px !important;
    }

    .recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9:last-of-type,
    .recent-posts-widget .es-carousel-arrow-control-container:last-of-type {
        right: 20px !important;
    }
}

@media (min-width: 1200px) {
    /* Desktop - arrows inside carousel edges */
    .recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9:first-of-type,
    .recent-posts-widget .es-carousel-arrow-control-container:first-of-type {
        left: 30px !important;
    }

    .recent-posts-widget .Carousel__CarouselArrowControlContainer-sc-f2ox7y-9:last-of-type,
    .recent-posts-widget .es-carousel-arrow-control-container:last-of-type {
        right: 30px !important;
    }
}

@media (max-width: 767px) {
    .recent-posts-widget > p {
        margin: 0;
        padding: 0;
    }
}