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

.text-sa-flag-600 {
    color: #1b8354 !important;
}

.text-netural-500 {
    color: #6c737f;
}

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

.btn-neutral-100 {
    background-color: #f3f4f6;
    border: 0 solid transparent;
    border-radius: .25rem;
    color: #161616;
    padding: 12px 1rem 15px;
}

a.btn-neutral-100,
.InnerContent a.btn-neutral-100,
.InnerContent a.btn-neutral-100:visited {
    text-decoration: none;
    display: inline-flex;
    color: #161616;
    font-weight: 500;
    font-size: 16px;
    align-items: center;
    gap: 4px;
}

.btn-arrow.svg-btn {
    display: inline-flex;
    position: relative;
}

.card .btn-arrow.svg-btn {
    height: 40px;
    min-width: 62px;
}

.card .btn-lg.btn-arrow.svg-btn {
    width: auto;
}

[dir='rtl'] .btn-arrow.svg-btn {
    padding-inline-end: 32px;
}

[dir='rtl'] .card .btn-lg.btn-arrow.svg-btn {
    padding-inline-end: 42px;
}


.btn-arrow.svg-btn::after {
    position: absolute;
    content: "";
    background-image: url('data:image/svg+xml,<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.250488 5.9997C0.250491 6.37326 0.416142 6.71983 0.573008 6.98006C0.742284 7.26087 0.969932 7.5508 1.21967 7.83348C1.72067 8.40055 2.37436 9.00953 3.00872 9.5604C3.64682 10.1145 4.28271 10.6247 4.75774 10.9955C4.99565 11.1812 5.19412 11.3326 5.33353 11.4379C5.40325 11.4906 5.45825 11.5318 5.49607 11.56L5.53964 11.5924L5.5512 11.6009L5.55521 11.6039C5.88871 11.8495 6.35865 11.7786 6.60431 11.4451C6.84996 11.1116 6.77877 10.6422 6.4453 10.3965L6.43258 10.3871L6.39253 10.3573C6.35711 10.3309 6.30468 10.2917 6.23769 10.2411C6.10366 10.1398 5.91151 9.99322 5.68068 9.81304C5.21821 9.45207 4.60412 8.95918 3.99222 8.42782C3.3766 7.89323 2.7803 7.33441 2.3438 6.84034C2.31619 6.80909 2.28947 6.77837 2.26365 6.74822L17.0005 6.74821C17.4147 6.74821 17.7505 6.41243 17.7505 5.99821C17.7505 5.584 17.4147 5.24821 17.0005 5.24821L2.26619 5.24822C2.29122 5.21901 2.3171 5.18929 2.3438 5.15906C2.7803 4.66499 3.3766 4.10616 3.99222 3.57157C4.60412 3.04022 5.21821 2.54732 5.68068 2.18635C5.91151 2.00618 6.10365 1.85958 6.23769 1.75833C6.30468 1.70772 6.35711 1.66848 6.39252 1.64208L6.43257 1.6123L6.4453 1.60289C6.77877 1.35722 6.84996 0.887743 6.6043 0.554256C6.35864 0.220755 5.88871 0.149864 5.55521 0.395526L5.5512 0.398486L5.53964 0.40704L5.49607 0.439424C5.45825 0.467619 5.40325 0.508791 5.33353 0.56146C5.19412 0.666772 4.99564 0.818208 4.75773 1.0039C4.28271 1.37468 3.64681 1.88489 3.00872 2.43899C2.37435 2.98986 1.72066 3.59884 1.21967 4.16592C0.969932 4.44859 0.742284 4.73852 0.573007 5.01934C0.417085 5.278 0.252481 5.62198 0.250505 5.99297" fill="%23161616"/></svg>');
    width: 30px;
    height: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.btn-arrow.svg-btn.external-icon::after {
    background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.59616 1.50012C7.32002 1.49962 7.09656 1.27536 7.09706 0.999223C7.09756 0.723081 7.32182 0.499627 7.59796 0.500123C8.806 0.502298 9.77358 0.517271 10.5441 0.641996C11.3293 0.769086 11.9641 1.01776 12.4711 1.52472C13.0188 2.07235 13.2645 2.76856 13.3818 3.64079C13.4961 4.49085 13.4961 5.57885 13.4961 6.96057V7.03651C13.4961 8.41826 13.4961 9.50627 13.3818 10.3563C13.2645 11.2286 13.0188 11.9248 12.4711 12.4724C11.9235 13.02 11.2272 13.2658 10.355 13.3831C9.50491 13.4974 8.41687 13.4974 7.03507 13.4974H6.95915C5.57739 13.4974 4.48937 13.4974 3.63928 13.3831C2.76703 13.2658 2.0708 13.02 1.52314 12.4724C1.01618 11.9654 0.767511 11.3306 0.640423 10.5455C0.515698 9.77493 0.500721 8.80737 0.498535 7.59937C0.498036 7.32323 0.721489 7.09897 0.997631 7.09847C1.27377 7.09797 1.49803 7.32142 1.49853 7.59756C1.50075 8.82207 1.51783 9.70769 1.62757 10.3857C1.73495 11.0491 1.92316 11.4582 2.23024 11.7653C2.56113 12.0962 3.01117 12.2896 3.77252 12.392C4.54826 12.4963 5.56903 12.4974 6.99711 12.4974C8.42523 12.4974 9.44601 12.4963 10.2218 12.392C10.9831 12.2896 11.4331 12.0961 11.764 11.7653C12.0949 11.4344 12.2884 10.9844 12.3907 10.2231C12.495 9.44737 12.4961 8.42662 12.4961 6.99854C12.4961 5.57049 12.495 4.54975 12.3907 3.77404C12.2884 3.01271 12.0949 2.5627 11.764 2.23184C11.4569 1.92474 11.0478 1.73653 10.3844 1.62915C9.70634 1.5194 8.82071 1.50233 7.59616 1.50012Z" fill="%23161616"/><path d="M0.989736 0.990152C1.11627 0.86348 1.27956 0.798197 1.39184 0.761173C1.51877 0.719316 1.662 0.688434 1.80604 0.664553C2.09528 0.616597 2.43998 0.588576 2.77451 0.571863C3.4465 0.53829 4.1326 0.547945 4.36729 0.551284C4.6434 0.555212 4.86405 0.782231 4.86012 1.05835C4.8562 1.33446 4.62918 1.55511 4.35306 1.55118C4.11877 1.54785 3.46118 1.5388 2.8244 1.57062C2.64621 1.57952 2.47389 1.59144 2.31574 1.60695L5.39604 4.6788C5.59157 4.87379 5.592 5.19037 5.39701 5.3859C5.20201 5.58143 4.88543 5.58187 4.6899 5.38687L1.60756 2.313C1.59188 2.47236 1.57986 2.64619 1.5709 2.82598C1.53911 3.46351 1.54815 4.12188 1.55148 4.35643C1.55539 4.63254 1.33474 4.85956 1.05862 4.86348C0.782507 4.86739 0.555496 4.64674 0.551577 4.37062C0.548242 4.13567 0.538603 3.44886 0.57214 2.77618C0.588834 2.44132 0.616822 2.0963 0.664712 1.80683C0.68856 1.66268 0.719393 1.51937 0.761171 1.3924C0.798119 1.28011 0.863263 1.11677 0.989736 0.990152Z" fill="%23161616"/></svg>');
    left: 10px;
    width: 20px;
    height: 20px;
}

.card .btn-lg.btn-arrow.svg-btn::after {
    left: 10px;
}

a.btn-neutral-100:hover {
    background-color: #e5e7eb;
    color: #161616 !important;
    text-decoration: none !important;
}

a.btn-neutral-100:active {
    background-color: #e5e7eb;
    color: #161616;
    text-decoration: none;
}

.btn-neutral-100:focus {
    color: #161616;
    outline: 2px solid #161616;
    text-decoration: none;
}

.section-space-md {
    padding: 2rem 0;
}

.sang-board-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
    .sang-board-card .card-content h4 {
        color: var(--colors-gray-950); /* BY UI*/
    }
.InnerContent .card-content h2 {
    font-size: 28px;
    letter-spacing: 0px;
    line-height: 36px;
    outline: 0px;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
    text-align: start;
    color: var(--colors-title-Default);
}

.card-content h3 {
    font-size: 24px;
    letter-spacing: 0px;
    line-height: 32px;
    margin-left: 0;
    margin-right: 0;
    text-align: start;
}

.board-detail-content h3 {
    margin-bottom: 16px !important;
}

.card-content p,
.InnerContent .content .card-content p {
    font-size: 16px;
    line-height: 24px !important;
    margin-bottom: 10px;
    color: #161616 !important;
}

.content-details .board-detail-content p {
    font-size: 18px;
    line-height: 28px !important;
    margin-bottom: 10px;
    color: #161616 !important;
}

.content-details ul li {
    font-size: 16px;
    line-height: 24px;
}

    .content-details ul li::marker {
        color: #1B8354;
    }

.sang-board-card .card-content h4 {
    line-height: 28px;
    font-size: 18px;
    margin-left: 0;
    margin-right: 0;
    text-align: start;
}

.sang-board-card .card-content h3,
.sang-board-card .card-content h4 {
    font-weight: 700;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    text-align: start;
}

.sang-board-card .card-content h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /*height: 65px; By UI */
}

.text-formatted-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.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 #f3f4f6;
    border-radius: 1rem;
}

.card.is-white {
    background-color: #fff;
}

.card {
    color: #1f2a37;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    padding: 1rem;
    transition: background-color .3s ease;
    word-break: break-word;
    text-align: start;
}

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

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

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


/* board card */

.sang-board .card-img {
    height: 250px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    width: 100%;
}

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

.card-img img,
.sang-banner-board img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: top;
}

.sang-board-card p {
    height: 72px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 24px;
}

/* video card */

.dual-date-formatter {
    align-items: center;
    color: #14573a;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.sang-video .card-img {
    height: 205px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    width: 100%;
}

.sang-video-card h2,
.sang-video-card h2 a,
.sang-document-card h2 a,
.sang-document-card h2 {
    font-size: 18px;
    color: #384250;
    font-weight: 700;
    line-height: 28px;
    height: 55px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

    .sang-video-card h2 a,
    .sang-document-card h2 a {
        text-decoration: none;
    }

        .sang-video-card h2 a:hover,
        .sang-document-card h2 a:hover {
            color: #6c737f;
            text-decoration: underline;
        }

.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;
}

/* video details */
.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: 28px;
    line-height: 36px;
}

.InnerContent .content-details h4 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    color: #161616 !important;
}

.InnerContent .content-details h5 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
}

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

/* carousel */

.sang-carousel .carousel-indicators,
.sang-carousel .carousel-navigation {
    gap: 8px;
}

    .sang-carousel .carousel-indicators li,
    .sang-carousel .carousel-indicators button {
        background-color: #E5E7EB;
        border: 0;
        flex: 0 1 auto;
        height: 16px;
        margin-left: 0px;
        margin-right: 0px;
        position: relative;
        width: 16px;
        border-radius: 50%;
        padding: 0;
        opacity: 1;
    }

        .sang-carousel .carousel-indicators li.active,
        .sang-carousel .carousel-indicators button.active {
            background-color: #1B8354;
        }

.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(20px, 6vw, 48px) !important;
    line-height: 60px !important;
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #fff;
}

.container-caption p {
    font-size: 20px;
    color: var(--color-white);
    line-height: 30px;
    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: 0;
    padding-right: 0;
    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: 40px;
        line-height: 48px;
    }

    .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: 0 !important;
}

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

.sang-carousel .carousel-caption {
    padding: 0 40px;
}

.document-container {
    gap: 16px;
}

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

.card-actions,
.card-action {
    display: inline-flex;
    position: relative;
}

.card .card-actions {
    margin-top: 12px;
    justify-content: end;
}

.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: 24px !important;
    min-height: 24px;
}
.icon-white {
    filter: brightness(0) invert(1); /* BY UI*/
}