#how-it-works {
    background-image: url("data:image/svg+xml,%3Csvg width='880' height='264' viewBox='0 0 880 264' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='440' cy='-176' r='439.5' stroke='%23773DBD' stroke-miterlimit='3.8637' stroke-dasharray='1 8'/%3E%3Ccircle opacity='0.8' cx='440' cy='-176' r='379.5' stroke='%23773DBD' stroke-miterlimit='3.8637' stroke-dasharray='1 8'/%3E%3Ccircle opacity='0.6' cx='440' cy='-176' r='319.5' stroke='%23773DBD' stroke-miterlimit='3.8637' stroke-dasharray='1 8'/%3E%3Ccircle opacity='0.4' cx='440' cy='-176' r='259.5' stroke='%23773DBD' stroke-miterlimit='3.8637' stroke-dasharray='1 8'/%3E%3Ccircle opacity='0.2' cx='440' cy='-176' r='199.5' stroke='%23773DBD' stroke-miterlimit='3.8637' stroke-dasharray='1 8'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position-x: center;
}

.work {
    position: relative !important;
    width: fit-content;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    height: fit-content !important;
    text-align: center;
}

.point-content {
    position: absolute;
    width: calc(100% - 130px);
    left: 0px;
    opacity: 0;
    animation-name: fadeOutAnim;
    animation-duration: 0.5s;
    z-index: 0;
}

.point-content.active img {
    width: 100%;
    margin-left: 0px;
}

.point-content img {
    margin: auto;
    width: calc(100% - 24px);
    margin-left: 12px;
}

.point-content.active {
    opacity: 1;
    width: 100%;
    position: relative;
    top: 20px;
    animation-name: fadeInAnim;
    animation-duration: 0.5s;
    z-index: 10;
}

@keyframes fadeOutAnim {
    0% {
        width: 100%;
        opacity: 1;
        z-index: 10;
    }
    100% {
        width: 100%;
        opacity: 0;
        z-index: 10;
    }
}

@keyframes fadeInAnim {
    0% {
        width: 100%;
        opacity: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

.hero-bg-image {
    background-image: url('/assets/img/products/esim-and-sim/hero-banner.png');
    background-size: cover;
    background-position: center;
    height: 800px;
}

.hero-bg-image h1 {
    text-shadow: 0px 6px 10px #000000;
}

.hero-bg-image p {
    color: #fff;
    text-shadow: 0px 6px 10px #000000;
    text-align: center;
}

@media only screen and (max-width: 575px) {
    .hero-bg-image {
        height: 500px;
    }
}

.action-box {
    width: 100%;
    height: 382px;
    cursor: pointer;
    border: 1px solid #BCC6CF;
    border-radius: 32px;
}

.content-box {
    width: 100%;
    height: 382px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
    transition: all 1s ease;
}

.action-box:hover .content-box {
    height: 0px;
    width: 100%;
    opacity: 0;
}

.hover-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 1s ease;
    height: 0px;
    padding: 40px;
    text-align: center;
    opacity: 0;
}

.action-box:hover .hover-box {
    height: 382px;
    width: 100%;
    opacity: 1;
}

@media only screen and (max-width: 575px) {
    .action-box,
    .hover-box,
    .content-box,
    .action-box:hover .hover-box {
        height: 550px;
    }
}

#arc:after {
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    top: -36px;
    right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='72' rx='36' fill='%235D2F7D'/%3E%3Cpath d='M22 20C22 18.9391 22.4214 17.9217 23.1716 17.1716C23.9217 16.4214 24.9391 16 26 16H50C51.0609 16 52.0783 16.4214 52.8284 17.1716C53.5786 17.9217 54 18.9391 54 20V52C54 53.0609 53.5786 54.0783 52.8284 54.8284C52.0783 55.5786 51.0609 56 50 56H45.2M28 48H28.02M22 28H34C36.2091 28 38 29.7909 38 32V52C38 54.2091 36.2091 56 34 56H22C19.7909 56 18 54.2091 18 52V32C18 29.7909 19.7909 28 22 28Z' stroke='%23FFAD5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

#rfid:after {
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    top: -36px;
    left: 36px;
    background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='72' rx='36' fill='%235D2F7D'/%3E%3Cpath d='M36 16L42.18 28.52L56 30.54L46 40.28L48.36 54.04L36 47.54L23.64 54.04L26 40.28L16 30.54L29.82 28.52L36 16Z' stroke='%23FFAD5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}