.bg-hero-eagle {
    background-image: url('../assets/egol.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    width: 100%;
    z-index: -1;
}

.kuya-jay {
    position: absolute;
    width: 550px;
    bottom: -48px;
    left: 0px;
    z-index: 20;
}

.kuya-angelo {
    position: absolute;
    width: 520px;
    bottom: -48px;
    right: 5px;
    z-index: 20;
}

.mga-bata {
    position: absolute;
    width: 760px;
    bottom: -60px;
    left: 350px;
    z-index: 10;
    transform: scale(1.3);
    clip-path: inset(0 0 25% 0);
    filter: blur(1.8px);
}

.card-hero {
    position: relative;
    background-color: #1B1D21;
    border-radius: 20px;
    box-shadow: 0px 20px 40px 0px #0000001A;
}

.card-hero::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(98.46deg, #2563EB -0.98%, rgba(255, 255, 255, 0.2) 103.71%);
    border-radius: inherit;
    z-index: -1;
}

.hero-section {}

.hero-section.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.--sticky {
    position: absolute;
    bottom: -60px;
}

.d-none {
    display: none !important;
}

.--cards-container {
    --item-width: 250px;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.--cards {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    transition: transform 0.3s ease;
    padding: 0;
    margin: 0;
}

.--card {
    width: var(--item-width);
    flex: 0 0 auto;
    perspective: 1000px;
    position: relative;
    z-index: 1;
    will-change: z-index;
    display: block;
    scroll-snap-align: center;
    text-decoration: none;
    margin: 0;
    padding: 0;
    transition: transform 0.2s;
}

.--card:hover {
    transform: scale(1.05);
}

.--card.d-none {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.--card.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    margin-right: 1rem !important;
}

.--card.first-card {
    width: 400px;
}

.--card>.--image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 250 / 350;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.5s, width 0.5s, height 0.5s;
}

.--image>img {
    display: block;
    border-radius: 1rem;
    height: 275px;
    width: 220px;
    object-fit: cover;
    transition: translateX(100px);
}

.--card.first-card>.--image>img {
    height: 530px;
    width: 464px;
}

.--controls {
    margin-top: 20px;
    float: right;
}

.--controls button {
    font-size: 16px;
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
    background-color: #635959;
    color: #fff;
    border: none;
    border-radius: 20px;
    outline: none;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.--controls button:active {
    transform: scale(0.95);
}

.--image {
    position: relative;
}

.--image::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: 30px;
    left: -1px;
    background: linear-gradient(98.46deg, #2563EB -0.98%, rgba(255, 255, 255, 0.2) 103.71%);
    z-index: -1;
    border-radius: 20px;
}

.--content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 10px;
    /* Adjusted to fit within the smaller image size */
    left: 10px;
    /* Adjusted to fit within the smaller image size */
}

.--content-button {
    background-color: rgba(27, 29, 33, 0.5);
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    position: absolute;
    bottom: 40px;
    /* Adjusted to fit within the smaller image size */
    left: 5px;
    /* Adjusted to fit within the smaller image size */
    opacity: 0.5;
    font-size: 10px;
    /* Adjusted font size */
    padding: 3px 7px;
    /* Adjusted padding */
}

.--content-image {
    position: absolute;
    bottom: 50px;
    /* Adjusted to fit within the smaller image size */
    right: 110px;
    /* Adjusted to fit within the smaller image size */
    opacity: 0.5;
    width: 20px;
    /* Adjusted size */
    height: 20px;
    /* Adjusted size */
}


.blur-cn {
    position: relative;
}

.blur-cn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="%2300f"><path d="M41.8,-45.3C55.4,-36.2,68.8,-28.1,79.6,-17.5C90.4,-6.9,98.6,6.1,92.5,16.7C86.4,27.3,66,35.5,47.1,45.1C28.2,54.7,10.9,65.7,-6.2,68.9C-23.3,72.1,-39.7,67.5,-54.6,58.6C-69.5,49.7,-82.8,36.5,-86.7,21.8C-90.6,7.1,-85.1,-9.2,-76.2,-21.9C-67.3,-34.6,-54.9,-43.7,-41.3,-52.2C-27.7,-60.7,-13.9,-68.5,0.4,-68.5C14.7,-68.5,28.2,-54.4,41.8,-45.3Z" transform="translate(100 100)" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(100px);
    opacity: 0.5;
    /* z-index: -1; */
}

.blur-cn-1 {
    position: relative;
}

.blur-cn-1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="%2300f"><path d="M41.8,-45.3C55.4,-36.2,68.8,-28.1,79.6,-17.5C90.4,-6.9,98.6,6.1,92.5,16.7C86.4,27.3,66,35.5,47.1,45.1C28.2,54.7,10.9,65.7,-6.2,68.9C-23.3,72.1,-39.7,67.5,-54.6,58.6C-69.5,49.7,-82.8,36.5,-86.7,21.8C-90.6,7.1,-85.1,-9.2,-76.2,-21.9C-67.3,-34.6,-54.9,-43.7,-41.3,-52.2C-27.7,-60.7,-13.9,-68.5,0.4,-68.5C14.7,-68.5,28.2,-54.4,41.8,-45.3Z" transform="translate(100 100)" /></svg>');

    background-position: center;
    filter: blur(1500px);
    opacity: 0.5;
    /* z-index: -1; */
}


.--cards .--card:first-child .--content-button {
    /* Adjust the position as needed */
    position: absolute;
    bottom: 50px;
    font-size: 15px;
    padding: 5px;
}

.--cards .--card:first-child .--content-image {
    /* Adjust the position as needed */
    position: absolute;
    bottom: 60px;
    right: 180px;
    width: 40px;
    /* Adjusted size */
    height: 40px;
    /* Adjusted size */
}

.--content-position {
    position: absolute;
    bottom: 55px;
    right: 20px;
    font-size: 10px;
}

.--content-chairman {
    position: absolute;
    bottom: 45px;
    right: 20px;
    font-size: 10px;
}

.--cards .--card:first-child .--content-position {
    position: absolute;
    bottom: 80px;
    right: 50px;
    font-size: 15px;
}

.--cards .--card:first-child .--content-chairman {
    position: absolute;
    bottom: 60px;
    right: 50px;
    font-size: 15px;
}

.card-officer {
    --item-width: 320px;
    position: relative;
    width: var(--item-width);
    max-width: 100%;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
    background-color: #f8f9fa;
    /* Card background color */
    border-radius: 20px;
    /* Rounded corners */
    background: linear-gradient(98.46deg, #2563EB -0.98%, rgba(255, 255, 255, 0.2) 103.71%);
    padding: 1px;
}


@keyframes carouselAnim {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(calc(-100% + (6*300px)));
    }
}

@media only screen and (max-width: 768px) {
    .container .carousel-items {
        animation: carouselAnim 60s infinite alternate linear;
    }

    @keyframes carouselAnim {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(calc(-100% + (5*300px)));
        }
    }
}

.carousel-focus:hover {
    transition: all 0.8s;
    transform: scale(1.1);
}

.circle-number {
    list-style-type: none;
    position: relative;
    padding-left: 2.5em;
}

.circle-number::before {
    content: counter(list-item);
    position: absolute;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}