@media (min-width: 1440px) {
    .content-details {
        max-width: 828px;
        margin: var(--spacing-none) auto;
    }
}

.text-sa-flag-600 {
    color: var(--colors-brand-600) !important;
}

.text-netural-500 {
    color: var(--colors-gray-500);
}

.font-weight-700 {
    font-weight: 700;
}

    .sang-board-card .card-content h4 {
        color: var(--colors-gray-950); /* BY UI*/
    }

.card-content h3 {
    font-size: var(--Display-xsF);
    letter-spacing: 0px;
    line-height: var(--Display-xsL);
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
    text-align: start;
}

.board-detail-content h3 {
    margin-bottom: var(--spacing-xl) !important;
}

.card-content p,
.InnerContent .content .card-content p {
    font-size: var(--Text-mdF);
    line-height: var(--Text-mdL) !important;
    margin-bottom: var(--spacing-md);
    color: var(--colors-title-Default) !important;
}

.content-details .board-detail-content p {
    font-size: var(--Text-lgF);
    line-height: var(--Text-lgL) !important;
    margin-bottom: var(--spacing-md);
    color: var(--colors-title-Default) !important;
}

.content-details ul li {
    font-size: var(--Text-mdF);
    line-height: var(--Text-mdL);
}

    .content-details ul li::marker {
        color: var(--colors-brand-600);
    }

.sang-board-card .card-content h4 {
    line-height: var(--Text-lgL);
    font-size: var(--Text-lgF);
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
    text-align: start;
}

.sang-board-card .card-content h3,
.sang-board-card .card-content h4 {
    font-weight: 700;
    margin-bottom: var(--spacing-none);
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
    text-align: start;
}

.sang-board-card .card-content h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card.has-shadow {
    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
}

.card.has-shadow {
    border: 1px solid var(--colors-gray-100);
    border-radius: 1rem;
}

.card.is-white {
    background-color: var(--colors-white);
}

.card {
    color: var(--colors-gray-800);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
    height: 100%;
    padding: var(--spacing-xl);
    transition: background-color .3s ease;
    word-break: break-word;
    text-align: start;
}

    .card.card-n-border {
        border: 0;
    }

.sang-board-card img,
.sang-board .card img {
    border-radius: .5rem;
    transition: transform .3s ease;
}

.sang-board-card p {
    height: 72px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: var(--Display-xsF);
}

.dual-date-formatter {
    align-items: center;
    color: var(--colors-brand-800);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.icon-clander {
    position: relative;
    width: 22px;
    height: 22px;
}

    .icon-clander::after {
        position: absolute;
        content: "";
        background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.50065 9.20829C6.15547 9.20829 5.87565 9.48812 5.87565 9.83329C5.87565 10.1785 6.15547 10.4583 6.50065 10.4583H6.70898L6.70898 13.1666C6.70899 13.5118 6.98881 13.7916 7.33399 13.7916C7.67916 13.7916 7.95899 13.5118 7.95898 13.1666L7.95898 10.1226C7.95897 9.69542 7.63814 9.20829 7.07947 9.20829H6.50065Z" fill="%231B8354"/><path d="M9.83398 9.20829C9.48881 9.20829 9.20898 9.48812 9.20898 9.83329C9.20898 10.1785 9.48881 10.4583 9.83398 10.4583H10.6969L9.77273 12.9492C9.65266 13.2728 9.81767 13.6325 10.1413 13.7526C10.4649 13.8727 10.8246 13.7077 10.9447 13.384L12.0734 10.3417C12.2971 9.73892 11.8062 9.20829 11.2679 9.20829H9.83398Z" fill="%231B8354"/><path d="M4.00065 5.04163C3.65547 5.04163 3.37565 5.32145 3.37565 5.66663C3.37565 6.0118 3.65547 6.29163 4.00065 6.29163H14.0007C14.3458 6.29163 14.6257 6.0118 14.6257 5.66663C14.6257 5.32145 14.3458 5.04163 14.0007 5.04163H4.00065Z" fill="%231B8354"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.62565 0.666626C4.62565 0.321448 4.34583 0.041626 4.00065 0.041626C3.65547 0.041626 3.37565 0.321448 3.37565 0.666626V1.19562C2.70502 1.38569 2.1394 1.69462 1.6686 2.20359C1.02035 2.90441 0.732192 3.78989 0.594192 4.89955C0.458968 5.98688 0.458975 7.38035 0.458985 9.15832V9.67493C0.458975 11.4529 0.458968 12.8464 0.594192 13.9337C0.732192 15.0434 1.02035 15.9288 1.6686 16.6297C2.32327 17.3374 3.16129 17.6584 4.21006 17.8108C5.22508 17.9583 6.52194 17.9583 8.15835 17.9583H9.84295C11.4794 17.9583 12.7762 17.9583 13.7912 17.8108C14.84 17.6584 15.678 17.3374 16.3327 16.6297C16.981 15.9288 17.2691 15.0434 17.4071 13.9337C17.5423 12.8464 17.5423 11.4529 17.5423 9.6749V9.15835C17.5423 7.38036 17.5423 5.98689 17.4071 4.89955C17.2691 3.78989 16.981 2.90441 16.3327 2.20359C15.8619 1.69462 15.2963 1.38569 14.6257 1.19562V0.666626C14.6257 0.321448 14.3458 0.041626 14.0007 0.041626C13.6555 0.041626 13.3757 0.321448 13.3757 0.666626V0.971538C12.4289 0.874935 11.264 0.874946 9.84295 0.87496H8.15836C6.73734 0.874946 5.57237 0.874935 4.62565 0.971538V0.666626ZM2.58623 3.0524C2.80234 2.81876 3.06006 2.63988 3.39948 2.50483C3.47404 2.76661 3.71496 2.95829 4.00065 2.95829C4.34583 2.95829 4.62565 2.67847 4.62565 2.33329V2.22878C5.50982 2.12626 6.65263 2.12496 8.20898 2.12496H9.79232C11.3487 2.12496 12.4915 2.12626 13.3757 2.22878V2.33329C13.3757 2.67847 13.6555 2.95829 14.0007 2.95829C14.2863 2.95829 14.5273 2.76661 14.6018 2.50483C14.9412 2.63989 15.199 2.81876 15.4151 3.0524C15.8102 3.47961 16.0438 4.06592 16.1667 5.05382C16.2912 6.05502 16.2923 7.37074 16.2923 9.20266V9.63059C16.2923 11.4625 16.2912 12.7782 16.1667 13.7794C16.0438 14.7673 15.8102 15.3536 15.4151 15.7809C15.0263 16.2011 14.5029 16.4442 13.6115 16.5738C12.6967 16.7067 11.4908 16.7083 9.79232 16.7083H8.20898C6.51055 16.7083 5.30462 16.7067 4.38985 16.5738C3.49838 16.4442 2.975 16.2011 2.58623 15.7809C2.19106 15.3536 1.95749 14.7673 1.83464 13.7794C1.71012 12.7782 1.70898 11.4625 1.70898 9.63059V9.20266C1.70898 7.37074 1.71012 6.05502 1.83464 5.05382C1.95749 4.06592 2.19106 3.47961 2.58623 3.0524Z" fill="%231B8354"/></svg>');
        width: 20px;
        height: 20px;
        background-position: center;
        background-repeat: no-repeat;
    }

.fade-in {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInUp 0.4s ease forwards;
}

.details-video {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    height: 424px;
    width: 100%;
}

    .details-video img,
    .details-video img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .details-video iframe {
        height: 100%;
    }

.content-details .image-details {
    height: auto;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    width: 100%;
}

.InnerContent .content .image-details img {
    height: 100% !important;
}

.image-details img,
.InnerContent .content .image-details img {
    border-radius: .5rem;
    transition: transform .3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-details img {
    object-position: top center;
}

.InnerContent .content-details h2 {
    font-size: var(--Display-smF);
    line-height: var(--Display-smL);
}

.InnerContent .content-details h4 {
    font-size: var(--Text-xlF);
    line-height: var(--Text-xlL);
    font-weight: 600;
    color: var(--colors-title-Default) !important;
}

.InnerContent .content-details h5 {
    font-size: var(--Text-xlF);
    line-height: var(--Text-xlL);
    font-weight: 600;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sang-carousel .carousel-indicators,
.sang-carousel .carousel-navigation {
    gap: var(--spacing-md);
}

    .sang-carousel .carousel-indicators li,
    .sang-carousel .carousel-indicators button {
        background-color: var(--colors-gray-200);
        border: 0;
        flex: 0 1 auto;
        height: 16px;
        margin-left: var(--spacing-none);
        margin-right: var(--spacing-none);
        position: relative;
        width: 16px;
        border-radius: 50%;
        padding: var(--spacing-none);
        opacity: 1;
    }

        .sang-carousel .carousel-indicators li.active,
        .sang-carousel .carousel-indicators button.active {
            background-color: var(--colors-brand-600);
        }

.sang-carousel .carousel-item {
    height: 600px;
    position: relative;
}

    .sang-carousel .carousel-item img {
        min-height: 600px;
        height: 100%;
        object-fit: cover;
        display: block;
        width: 100%;
    }

    .sang-carousel .carousel-item:after {
        position: absolute;
        content: "";
        background: rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

.sang-carousel .carousel-navigation button .carousel-item img {
    height: 100%;
    object-fit: cover;
}

.container-caption h2,
.container-caption h1 {
    font-size: clamp(var(--Text-xlF), 6vw, var(--Display-lgF)) !important;
    line-height: var(--Display-lgL) !important;
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--colors-white);
}

.container-caption p {
    font-size: var(--Text-xlF);
    line-height: var(--Text-xlL);
    color: var(--color-white);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.carousel-caption,
.banner-caption {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    right: auto;
    left: 0;
    width: 100%;
    text-align: start;
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
    z-index: 1;
    position: absolute;
}

[dir=rtl] .carousel-caption,
[dir=rtl] .banner-caption {
    right: 0;
    left: auto;
}

.banner-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* aspect-ratio: 16 / 5; */
}

    .banner-wrapper .SANGcontainer {
        position: relative;
    }

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    height: 600px;
}

    .banner-img img {
        height: 600px;
        object-fit: cover;
        width: 100%;
    }

.carousel-caption .container {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 600px) {

    .container-caption h2,
    .container-caption h1 {
        font-size: var(--Display-mdF);
        line-height: var(--Display-mdL);
    }

    .sang-carousel .carousel-item {
        height: 240px !important;
        width: 100%;
        max-height: 240px;
    }

        .sang-carousel .carousel-item img {
            min-height: 240px;
            min-width: 400px;
        }

    .banner-img {
        min-height: 240px;
        height: auto;
    }

        .banner-img img {
            height: auto;
        }
}

@media (max-width: 1024px) {
    .content-details .image-details {
        height: 100%;
    }
}

@media (min-width: 1100px) and (max-width: 1439.98px) {
    .carousel-caption-inner {
        max-width: 70%;
    }
}

@media (min-width: 1440px) {
    .carousel-caption-inner {
        max-width: 50%;
    }
}

.sang-carousel .carousel-control-next,
.sang-carousel .carousel-control-prev {
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-none) !important;
}

.sang-carousel .carousel-control-next-icon,
.sang-carousel .carousel-control-prev-icon {
    width: 25px;
    height: 25px;
}

.sang-carousel .carousel-caption {
    padding: var(--spacing-none) var(--spacing-5xl);
}

.document-container {
    gap: var(--spacing-xl);
}

.document-svg {
    background: #F7FDF9;
    width: 80px;
    height: 80px;
    flex: 1 0 auto;
    border-radius: 8px;
}

.sang-document-card p,
.InnerContent .content .sang-document-card p {
    max-height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: var(--Text-mdL) !important;
    min-height: var(--Text-mdL);
}

.icon-white {
    filter: brightness(0) invert(1); 
}