:root {
    --bs-primary: #0058A3;
    --bs-secondary: #FFDB00;
    --bs-warning: #FFDB00;
    --bs-success: #2E7D32;
    --bs-danger: #D32F2F;
    --bs-info: #0288D1;
    --bs-light: #F5F5F5;
    --bs-dark: #1F2937;
    --bs-body-color: #333;
    --bs-body-bg: #FFF;
    --bs-secondary-color: #FFDB00;
    --bs-border-color: #E0E0E0;
    --bs-border-radius: .5rem;
    --bs-link-color: #0058A3;
    --bs-link-hover-color: #003A8F;
    --bs-success-emphasis: #2E7D32;
    --bs-primary-emphasis: #022443;
}

.btn-primary {
    --bs-btn-bg: #0058A3;
    --bs-btn-border-color: #0058A3;
    --bs-btn-hover-bg: #003A8F;
    --bs-btn-hover-border-color: #003A8F;
    --bs-btn-active-bg: #002F6C
}

.btn-secondary {
    --bs-btn-bg: #FFDB00;
    --bs-btn-border-color: #FFDB00;
    --bs-btn-color: #111;
    --bs-btn-hover-bg: #F2CE00
}




.card {
    border-color: #E0E0E0;
    border-radius: .75rem
}

.card-title {
    color: #111827
}

.form-control {
    border-color: #D1D5DB
}

.form-control:focus {
    border-color: #0058A3;
    box-shadow: 0 0 0 .2rem rgba(0, 88, 163, .15)
}

.bg-page {
    background: #F5F5F5
}

.bg-blue {
    background: var(--bs-primary-emphasis);
    color: #FFF
}

.bg-yellow {
    background: #FFDB00;
    color: #111
}


.bg-bottom-waves {
    background-image: url("/wave_2.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom -766px center;
    min-height: 200px;
    padding-bottom: 200px;
}

.bg-top-waves {
    background-color: var(--bs-light);
    background-image: url("/wave_2.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top -150px center;
    min-height: 200px;
    padding-top: 100px;
}

.bg-net {
    min-height: 200px;
    background-image: url("/bg_net.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: end center;
}

.bg-net-2 {
    min-height: 200px;
    background-image: url("/bg_net_2.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: end center;
}

.bg-corner {
    background-image: url("/bg_corner.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: end center;
}

.bg-shape {
    min-height: 200px;
    background-image: url("/bg_shape.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: end center;
}

.bg-paint {
    background-image: url("/bg_paint.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.bg-overlay {
    background-image: url("/bg_overlay.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.masked-image {
    mask-image: url('/mask.svg');
    -webkit-mask-image: url('mask.svg');
    /* For Safari */
    mask-size: cover;
    mask-repeat: no-repeat;
}

.fancy-radius {
    border-radius: 67% 33% 61% 39% / 47% 30% 70% 53%;
    box-shadow: 3px 2px 0px 15px rgb(255, 237, 123);
    -webkit-box-shadow: 3px 2px 0px 15px rgb(255, 237, 123);
    -moz-box-shadow: 3px 2px 0px 15px rgb(255, 237, 123);
}


body {
    font-family: "Quicksand", sans-serif;
    background-color: #e8e8e8;
}

.ft-handwriting {
    font-family: "Shadows Into Light", cursive;
}

.card-hover {
    transition: all 1s;
}

.card-hover:hover {
    background-color: var(--bs-light);
}

@property --num {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

.counter {
    --target: attr(data-target type(<integer>));
    animation: countUp 3s ease-out forwards;
    counter-reset: num var(--num);
}

@keyframes countUp {
    from {
        --num: 0;
    }

    to {
        --num: var(--target);
    }
}

.counter::after {
    content: counter(num);
}

.fade-out-image {
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
}

.fade-out-radar-image {
    -webkit-mask-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    mask-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

.bi-xiaohongshu {
    display: inline-block;
    height: 32px;
    width: 48px;
    line-height: 32px;
    background-image: url("/xiaohongshu.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bi-xiaohongshu::before {
    content: "";
}