/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 17 2025 | 17:52:57 */
.subscription-cycle-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 4rem !important;
    font-size: 1rem;
    color: #c9d1d9;
}
.switch-control {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    margin: 0 1rem;
}
.switch-control input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-slider-track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #21262d;
    transition: .4s;
    border-radius: 34px;
    border: 1px solid #30363d;
}
.switch-slider-track:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .switch-slider-track {
    background-color: #58a6ff;
}
input:checked + .switch-slider-track:before {
    transform: translateX(22px);
}
.discount-tag {
    background-color: rgba(38, 166, 65, 0.15);
    color: #58F381;
    padding: 0.25rem 0.6rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 10px;
}
.tier-heading {
    color: #4FACFE !important;
}
.tier-card,
.tier-card-basic,
.tier-card-advanced,
.tier-card-corporate,
.tier-card-future {
    margin-bottom: 30px;
    background-color: #222222;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
}
.tier-title-free, .tier-title-basic, .tier-title-advanced, .tier-title-corporate, .tier-title-future {
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 5px;
}
.tier-title-free { color: white; }
.tier-title-basic {
    background: linear-gradient(to right, #0b6623, #1dbc60, #0b6623);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: textGradientAnimation 3s linear infinite; background-size: 200% 100%;
}
.tier-title-advanced {
    background: linear-gradient(to right, #0d98ba, #20ecff, #0d98ba);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: textGradientAnimation 3s linear infinite; background-size: 200% 100%;
}
.tier-title-corporate {
    background: linear-gradient(to right, #7600bc, #7146cf, #7600bc);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: textGradientAnimation 3s linear infinite; background-size: 200% 100%;
}
.tier-title-future {
    background: linear-gradient(to right, #FFD700, #FFA500, #FFD700);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: textGradientAnimation 3s linear infinite; background-size: 200% 100%;
}
@keyframes textGradientAnimation {
    0% { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}
.cost-basic, .cost-advanced, .cost-corporate {
    color: #ffffff;
    margin-top: 20px;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 10px;
}
.cost-details-basic, .cost-details-advanced {
    font-weight: 400; font-size: 16px; color: #aaa;
}
.tier-description-basic, .tier-description-advanced, .tier-description-corporate, .tier-description-future {
    font-weight: 500; font-size: 16px; color: #fff;
    margin-top: -10px; margin-bottom: 5px;
}
.feature-list, .feature-list-basic, .feature-list-advanced, .feature-list-corporate, .feature-list-future {
    color: #ffffff; list-style: none; padding: 0 !important;
    margin-top: 30px; text-align: left;
}
.feature-list li, .feature-list-basic li, .feature-list-advanced li, .feature-list-corporate li, .feature-list-future li {
    margin-bottom: 10px; display: flex; align-items: center;
}
.icon-tick, .icon-tick-basic, .icon-tick-advanced, .icon-tick-corporate, .icon-tick-future {
    display: inline-block; width: 20px; height: 20px;
    background-size: cover; background-repeat: no-repeat;
    margin-right: 10px; vertical-align: middle; flex-shrink: 0;
}
.icon-tick { background-image: url('https://hello.xcard.my/wp-content/uploads/2025/03/tick-white.png'); }
.icon-tick-basic { background-image: url('https://hello.xcard.my/wp-content/uploads/2025/03/check_24dp_008761_FILL0_wght400_GRAD0_opsz24.png'); }
.icon-tick-advanced { background-image: url('https://hello.xcard.my/wp-content/uploads/2025/03/tick-blue.png'); }
.icon-tick-corporate { background-image: url('https://hello.xcard.my/wp-content/uploads/2025/03/tick-purple.png'); }
.icon-tick-future { background-image: url('https://hello.xcard.my/wp-content/uploads/2025/03/tick-gold.png'); }
.tier-action-button {
    display: block; width: 100%; padding: 15px 20px; font-size: 16px;
    color: white; font-weight: bold; border-radius: 10px; border: none;
    cursor: pointer; text-align: center; text-decoration: none;
    margin-top: 30px; box-sizing: border-box;
    transition: opacity 0.3s ease;
}
.tier-action-button:hover { opacity: 0.9; }
.action-button-free, .action-button-advanced {
    background: linear-gradient(to right, #4FACFE, #20ECFF, #4FACFE);
    background-size: 200% 100%; background-position: 100% 50%;
}
.action-button-basic { background-color: #19a954; }
.action-button-corporate { background-color: #7146cf; }