.top-big-title{
    color: rgba(24, 35, 87, 1);
    font-size: 50px;
    font-weight: 800;
    line-height: 66px;
    margin-top: 6vh;
}
.top-small-p{
    color: rgba(24, 35, 87, 1);
    margin-top: 12px;
}
.section-title-s{
    color: rgba(28, 28, 28, 1);
}
.how-list-all{
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.how-line{
    flex-shrink: 0;
}

.how-line img{
    width: 26.9px;
    height: auto;
}

.how-content{
    flex: 1;
}

.how-list{
    margin-bottom: 50px;
}
.how-title{
    color: rgba(108, 108, 108, 1);
    font-weight: 600;
    font-size: 20px;
}
.how-title-span{
    color: rgba(24, 35, 87, 1);
}
.how-desc{
    color: rgba(102, 102, 102, 1);
}
.say-list{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(233, 250, 255, 1);
    border-radius: 16px;
    padding: 20px 40px;
    margin: 80px 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.say-list::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(45deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1), rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.say-list:hover{
    transform: translateY(-15px) scale(1.02);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 25px 50px rgba(0, 202, 255, 0.2);
}

.say-list:hover::before{
    opacity: 1;
    animation: border-flow 2s ease infinite;
}
.say-name{
    color: rgba(1, 26, 65, 1);
    font-size: 18px;
    font-weight: 600;
}
.say-point-img{
    animation: point-float 3s ease-in-out infinite;
    transition: all 0.4s ease;
}

.say-point-img img{
    transition: all 0.4s ease;
}

@keyframes point-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-5px) rotate(2deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-5px) rotate(-2deg); }
}

.say-list:hover .say-point-img{
    animation: point-bounce 0.6s ease-out;
}

.how-img-wrapper{
    position: relative;
    animation: how-float 6s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.how-img-wrapper img{
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes how-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-10px) rotate(1deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-10px) rotate(-1deg); }
}

.how-img-wrapper:hover{
    animation: how-pulse 0.8s ease-out;
}

@keyframes how-pulse{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.05); }
    100%{ transform: scale(1); }
}

.how-img-wrapper:hover img{
    filter: drop-shadow(0 0 20px rgba(0, 202, 255, 0.6)) drop-shadow(0 0 40px rgba(0, 202, 255, 0.3));
    transform: scale(1.05);
}

.how-img-wrapper::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 20px;
}

.how-img-wrapper:hover::before{
    opacity: 1;
}

@keyframes point-bounce{
    0%{ transform: translateY(0) scale(1); }
    30%{ transform: translateY(-20px) scale(1.2); }
    60%{ transform: translateY(5px) scale(0.9); }
    80%{ transform: translateY(-3px) scale(1.05); }
    100%{ transform: translateY(0) scale(1); }
}

.say-list:hover .say-point-img img{
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 180, 0, 0.5)) drop-shadow(0 0 45px rgba(255, 150, 0, 0.3));
}

.say-head-img{
    margin-top: 13px;
    margin-bottom: 5px;
    position: relative;
    border-radius: 50%;
    padding: 4px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.say-title{
    color: rgba(1, 26, 65, 1);
}
.say-desc{
    color: rgba(85, 85, 85, 1);
    text-align: center;
    min-height: 160px;
}
.Trusted-list{
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.Trusted-list::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(45deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1), rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.Trusted-list:hover{
    transform: translateX(15px) translateY(-5px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 15px 40px rgba(0, 202, 255, 0.2);
}

.Trusted-list:hover::before{
    opacity: 1;
    animation: border-flow 2s ease infinite;
}

.Trusted-info{
    margin-left: 10px;
    transition: transform 0.4s ease;
}

.Trusted-list:hover .Trusted-info{
    transform: translateX(5px);
}

.Trusted-title{
    color: rgba(24, 35, 87, 1);
    font-weight: 600;
    font-size: 20px;
    transition: color 0.4s ease;
}

.Trusted-list:hover .Trusted-title{
    color: rgba(0, 202, 255, 1);
}

.Trusted-desc{
    color: rgba(24, 35, 87, 1);
    transition: color 0.4s ease;
}

.Trusted-list:hover .Trusted-desc{
    color: rgba(85, 85, 85, 1);
}

.Trusted-img{
    animation: trusted-pulse 2s ease-in-out infinite;
    transition: all 0.4s ease;
}

@keyframes trusted-pulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.1); }
}

.Trusted-list:hover .Trusted-img{
    animation: trusted-spin 0.6s ease-out;
}

@keyframes trusted-spin{
    0%{ transform: rotate(0deg) scale(1); }
    50%{ transform: rotate(180deg) scale(1.2); }
    100%{ transform: rotate(360deg) scale(1); }
}

.Trusted-list:hover .Trusted-img img{
    filter: drop-shadow(0 0 15px rgba(0, 202, 255, 0.8));
}

.trusted-e-img{
    animation: trusted-e-float 5s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

@keyframes trusted-e-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-15px) rotate(2deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-15px) rotate(-2deg); }
}

.trusted-e-img:hover{
    animation: trusted-e-pulse 0.8s ease-out;
}

@keyframes trusted-e-pulse{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.08); }
    100%{ transform: scale(1); }
}

.trusted-e-img:hover img{
    filter: drop-shadow(0 0 25px rgba(0, 202, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 202, 255, 0.4));
    transform: scale(1.05);
}

.trusted-e-img::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 20px;
}

.trusted-e-img:hover::before{
    opacity: 1;
}

.main-footer{
    background-image: url(../image/bottom-bg.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    padding: 60px 0 30px;
}

.footer-all{
    display: flex;
    justify-content: center;
    align-items: flex-start;
   
}

.footer-left{
    flex: 0.8;
}

.footer-logo{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.footer-logo img{
    width: 40px;
    height: 40px;
}

.footer-logo span{
    color: rgba(24, 35, 87, 1);
    font-weight: 700;
    font-size: 24px;
}

.footer-left p{
    color: rgba(24, 35, 87, 1);
    font-size: 14px;
    line-height: 1.6;
}

.footer-center{
    flex: 1;
    text-align: center;
}

.footer-center h4{
    color: rgba(24, 35, 87, 1);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
}

.footer-links{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.footer-links a{
    color: rgba(24, 35, 87, 1);
    font-size: 14px;
    text-decoration: none;
}

.footer-right{
    flex: 0.6;
    text-align: left;
    padding-left: 8%;
}

.footer-right h4{
    color: rgba(24, 35, 87, 1);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
}

.footer-contact{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.contact-item{
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-item img{
    width: 20px;
    height: 20px;
}

.contact-item span{
    color: rgba(24, 35, 87, 1);
    font-size: 14px;
}

.footer-copyright{
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(24, 35, 87, 0.2);
}

.footer-copyright p{
    color: rgba(24, 35, 87, 1);
    font-size: 12px;
}

.about-banner{
    background-image: url(../image/about-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.about-banner-content{
    max-width: 50%;
}

.do-list{
    background-color: white;
    border: 1px solid rgba(168, 216, 234, 0.5);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.do-list-big{
    min-height: 200px;
}

.do-list-small{
    min-height: 160px;
}

.do-list-1{
    background-image: url(../image/bga1.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 80% auto;
}

.do-list-2{
    background-image: url(../image/bga2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 80% auto;
}

.do-list-3{
    background-image: url(../image/bga3.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 80% auto;
}

.do-list-4{
    background-image: url(../image/bga4.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 80% auto;
}

.do-list-5{
    background-image: url(../image/bga5.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 80% auto;
}

.do-text{
    color: rgba(24, 35, 87, 1);
    font-weight: 600;
    font-size: 16px;
}

.do-list-small .do-text{
   
}

.Vision-title{
    color: rgba(28, 28, 28, 1);
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 35px;
}

.Vision-p{
    color: rgba(102, 102, 102, 1);
    margin-bottom: 20px;
    width: 80%;
}
.do-list{
    min-height: 200px;
}
.do-list-small{
    margin-top: 30px;
    margin-bottom: 60px;
}
.do-text{
    font-size: 18px;
    font-weight: 600;
    color: rgba(28, 28, 28, 1);
}
.do-list-1,.do-list-2{
    display: flex;
    align-items: center;
    justify-content: center;
}
.do-list-1 .do-text{
    margin-left: 30%;
}
.do-list-2 .do-text{
    margin-right: 30%;
}
.do-list-big-img{
    width: 100%;
    position: absolute;
}
.Commitment-p{
    color: rgba(102, 102, 102, 1);
    margin-bottom: 30px;
    width: 95%;
}
.Responsible-title{
    font-weight: 600;
    font-size: 30px;
    color: rgba(28, 28, 28, 1);
    margin-bottom: 25px;
}
.Responsible-desc{
    width: 60%;
    color: rgba(102, 102, 102, 1);
    padding-bottom: 50px;
}
.encourage-list{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(247, 253, 255, 1);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(247, 253, 255, 1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.encourage-list::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(45deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1), rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.encourage-list:hover{
    transform: translateY(-15px) scale(1.05);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 25px 50px rgba(0, 202, 255, 0.25);
}

.encourage-list:hover::before{
    opacity: 1;
    animation: border-flow 2s ease infinite;
}

.encourage-img{
    animation: encourage-float 4s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes encourage-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-8px) rotate(3deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-8px) rotate(-3deg); }
}

.encourage-list:hover .encourage-img{
    animation: encourage-bounce 0.6s ease-out;
}

@keyframes encourage-bounce{
    0%{ transform: translateY(0) scale(1); }
    30%{ transform: translateY(-25px) scale(1.3); }
    60%{ transform: translateY(5px) scale(0.9); }
    80%{ transform: translateY(-3px) scale(1.05); }
    100%{ transform: translateY(0) scale(1); }
}

.encourage-list:hover .encourage-img img{
    filter: drop-shadow(0 0 20px rgba(0, 202, 255, 0.8)) drop-shadow(0 0 40px rgba(0, 202, 255, 0.4));
}

.encourage-title{
    color: rgba(1, 26, 65, 1);
    margin-top: 5px;
    font-weight: 600;
    transition: all 0.4s ease;
}

.encourage-list:hover .encourage-title{
    color: rgba(0, 202, 255, 1);
    transform: translateY(-3px);
    text-shadow: 0 0 10px rgba(0, 202, 255, 0.5);
}

.notice-img-wrapper{
    animation: notice-float 4s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.notice-img-wrapper img{
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes notice-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-15px) rotate(3deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-15px) rotate(-3deg); }
}

.notice-img-wrapper:hover{
    animation: notice-bounce 0.7s ease-out;
}

@keyframes notice-bounce{
    0%{ transform: translateY(0) scale(1); }
    30%{ transform: translateY(-30px) scale(1.15); }
    60%{ transform: translateY(8px) scale(0.95); }
    80%{ transform: translateY(-4px) scale(1.05); }
    100%{ transform: translateY(0) scale(1); }
}

.notice-img-wrapper:hover img{
    filter: drop-shadow(0 0 25px rgba(0, 202, 255, 0.8)) drop-shadow(0 0 50px rgba(0, 202, 255, 0.5)) drop-shadow(0 0 75px rgba(0, 202, 255, 0.3));
    transform: scale(1.1);
}

.notice-img-wrapper::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 20px;
}

.notice-img-wrapper:hover::before{
    opacity: 1;
}

.faq-img-wrapper{
    animation: faq-float 5s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.faq-img-wrapper img{
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes faq-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-12px) rotate(2deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-12px) rotate(-2deg); }
}

.faq-img-wrapper:hover{
    animation: faq-pulse 0.8s ease-out;
}

@keyframes faq-pulse{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.08); }
    100%{ transform: scale(1); }
}

.faq-img-wrapper:hover img{
    filter: drop-shadow(0 0 25px rgba(0, 202, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 202, 255, 0.4)) drop-shadow(0 0 75px rgba(0, 202, 255, 0.2));
    transform: scale(1.08);
}

.faq-img-wrapper::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    height: 85%;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 20px;
}

.faq-img-wrapper:hover::before{
    opacity: 1;
}

.delete-title-img{
    animation: delete-title-float 5s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.delete-title-img img{
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes delete-title-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-12px) rotate(2deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-12px) rotate(-2deg); }
}

.delete-title-img:hover{
    animation: delete-title-pulse 0.8s ease-out;
}

@keyframes delete-title-pulse{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.08); }
    100%{ transform: scale(1); }
}

.delete-title-img:hover img{
    filter: drop-shadow(0 0 25px rgba(0, 202, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 202, 255, 0.4)) drop-shadow(0 0 75px rgba(0, 202, 255, 0.2));
    transform: scale(1.08);
}

.delete-title-img::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    height: 85%;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 20px;
}

.delete-title-img:hover::before{
    opacity: 1;
}

.about-img-wrapper{
    animation: about-float 5s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.about-img-wrapper img{
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes about-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-12px) rotate(2deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-12px) rotate(-2deg); }
}

.about-img-wrapper:hover{
    animation: about-pulse 0.8s ease-out;
}

@keyframes about-pulse{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.08); }
    100%{ transform: scale(1); }
}

.about-img-wrapper:hover img{
    filter: drop-shadow(0 0 25px rgba(0, 202, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 202, 255, 0.4)) drop-shadow(0 0 75px rgba(0, 202, 255, 0.2));
    transform: scale(1.08);
}

.about-img-wrapper::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    height: 85%;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 20px;
}

.about-img-wrapper:hover::before{
    opacity: 1;
}

.com-img-wrapper{
    animation: com-float 4s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.com-img-wrapper img{
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes com-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-10px) rotate(3deg); }
    50%{ transform: translateY(0) rotate(0deg); }
    75%{ transform: translateY(-10px) rotate(-3deg); }
}

.com-img-wrapper:hover{
    animation: com-bounce 0.6s ease-out;
}

@keyframes com-bounce{
    0%{ transform: translateY(0) scale(1); }
    30%{ transform: translateY(-25px) scale(1.2); }
    60%{ transform: translateY(5px) scale(0.95); }
    80%{ transform: translateY(-3px) scale(1.05); }
    100%{ transform: translateY(0) scale(1); }
}

.com-img-wrapper:hover img{
    filter: drop-shadow(0 0 20px rgba(0, 202, 255, 0.8)) drop-shadow(0 0 40px rgba(0, 202, 255, 0.5));
    transform: scale(1.1);
}

.com-img-wrapper::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 50%;
}

.com-img-wrapper:hover::before{
    opacity: 1;
}

.scroll-to-top{
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(0, 202, 255, 1), rgba(0, 150, 220, 1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 202, 255, 0.3);
}

.scroll-to-top::before{
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1), rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    background-size: 300% 300%;
    animation: border-flow 2s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-to-top:hover::before{
    opacity: 1;
}

.scroll-to-top i{
    color: white;
    font-size: 24px;
    font-weight: bold;
    transform: translateY(-1px);
    transition: transform 0.3s ease;
}

.scroll-to-top:hover{
    transform: translateY(-10px) scale(1.1);
    box-shadow: 0 10px 40px rgba(0, 202, 255, 0.5);
}

.scroll-to-top:hover i{
    transform: translateY(-3px);
}

.scroll-to-top.visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    animation: scroll-btn-bounce 0.5s ease-out;
}

@keyframes scroll-btn-bounce{
    0%{ transform: translateY(30px) scale(0.8); opacity: 0; }
    50%{ transform: translateY(-10px) scale(1.1); opacity: 1; }
    100%{ transform: translateY(0) scale(1); opacity: 1; }
}

.scroll-to-top.pulse{
    animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse{
    0%, 100%{ box-shadow: 0 4px 20px rgba(0, 202, 255, 0.3); }
    50%{ box-shadow: 0 8px 35px rgba(0, 202, 255, 0.6); }
}

.Compliance-title{
    color: rgba(28, 28, 28, 1);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 30px;
}
.Compliance-p{
    width: 90%;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
}

.Compliance-p::before{
    content: '\2713';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: rgba(0, 202, 255, 1);
    border-radius: 50%;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.container-show{
    background-color: white;
    border-radius: 18px;
    padding: 60px;
}
.Happens-list{
    display: flex;
    align-items: center;
}
.Happens-img{
    margin-right: 30px;
}
.Happens-title{
    color: rgba(28, 28, 28, 1);
    font-weight: 800;
    margin-bottom: 10px;
    font-size: 18px;
}
.Happens-title-s{
    color: rgba(102, 102, 102, 1);
    margin-bottom: 10px;
}
.Happens-li{
    color: rgba(102, 102, 102, 1);
}
.Request-title{
    color: rgba(28, 28, 28, 1);
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 25px;
}
.Request-title-s{
    color: rgba(102, 102, 102, 1);
}
.Request-li{
    color: rgba(102, 102, 102, 1);
}
.Request-list{
    padding: 40px;
    min-height: 290px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.Request-list1{
    background-image: url(../image/hbg1.png);
}

.Request-list2{
    background-image: url(../image/hbg2.png);
}

.delete-form-all{
    padding: 0 20px 60px;
}

.form-group{
    margin-bottom: 30px;
}

.form-label{
    display: block;
    color: rgba(28, 28, 28, 1);
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 12px;
}

.form-input{
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(221, 221, 221, 1);
    border-radius: 10px;
    font-size: 14px;
    background-color: rgba(250, 253, 255, 1);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus{
    outline: none;
    border-color: rgba(0, 202, 255, 1);
    box-shadow: 0 0 15px rgba(0, 202, 255, 0.3);
}

.form-hint{
    display: block;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    margin-top: 8px;
}

.captcha-group{
    display: flex;
    gap: 12px;
}

.captcha-btn{
    flex-shrink: 0;
    padding: 14px 24px;
    background-color: rgba(0, 202, 255, 1);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.captcha-btn:hover{
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0, 202, 255, 0.4);
}

.checkbox-group{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.delete-form-all input[type="checkbox"].form-checkbox{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    border: 2px solid rgba(0, 202, 255, 1) !important;
    border-radius: 4px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 2px 10px 0 0 !important;
    padding: 0 !important;
    background-color: white !important;
    display: block !important;
    line-height: 20px !important;
    transition: all 0.3s ease !important;
}

.delete-form-all input[type="checkbox"].form-checkbox:hover{
    border-color: rgba(0, 180, 230, 1) !important;
    box-shadow: 0 0 10px rgba(0, 202, 255, 0.3) !important;
}

.delete-form-all input[type="checkbox"].form-checkbox:focus{
    outline: none !important;
    box-shadow: 0 0 15px rgba(0, 202, 255, 0.5) !important;
}

.delete-form-all input[type="checkbox"].form-checkbox:checked{
    background-color: rgba(0, 202, 255, 1) !important;
    border-color: rgba(0, 202, 255, 1) !important;
}

.delete-form-all input[type="checkbox"].form-checkbox:checked::after{
    content: '\2713' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

.checkbox-label{
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}

.submit-btn{
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, rgba(0, 202, 255, 1) 0%, rgba(0, 150, 220, 1) 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 202, 255, 0.3);
    margin-top: 20px;
    animation: pulse-scale 2s ease-in-out infinite;
}

.submit-btn::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.8s ease, height 0.8s ease;
    border-radius: 50%;
}

.submit-btn:hover::after{
    width: 500px;
    height: 500px;
}

.submit-btn:hover{
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 202, 255, 0.4);
}

.submit-btn:active{
    transform: scale(0.98);
}

.modal-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active{
    opacity: 1;
    visibility: visible;
}

.modal-box{
    background: linear-gradient(135deg, rgba(0, 202, 255, 1) 0%, rgba(0, 150, 200, 1) 100%);
    padding: 60px 80px;
    border-radius: 30px;
    text-align: center;
    color: white;
    transform: scale(0.5) rotate(-10deg);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 500px;
    width: 90%;
    box-shadow: 0 30px 80px rgba(0, 202, 255, 0.5);
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.modal-overlay.active .modal-box{
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.modal-icon{
    font-size: 80px;
    margin-bottom: 20px;
    animation: pulse 1s infinite;
}

@keyframes pulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.1); }
}

.modal-title{
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.modal-message{
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.95;
}

.modal-btn{
    padding: 14px 40px;
    background-color: white;
    color: rgba(0, 202, 255, 1);
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-btn:hover{
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.error-modal .modal-box{
    background: linear-gradient(135deg, rgba(255, 69, 69, 1) 0%, rgba(255, 40, 40, 1) 100%);
    box-shadow: 0 30px 80px rgba(255, 69, 69, 0.5);
}

.error-modal .modal-icon{
    animation: shake 0.5s ease-in-out;
}

@keyframes shake{
    0%, 100%{ transform: translateX(0); }
    20%{ transform: translateX(-10px); }
    40%{ transform: translateX(10px); }
    60%{ transform: translateX(-10px); }
    80%{ transform: translateX(10px); }
}

.error-modal .modal-btn{
    background-color: white;
    color: rgba(255, 69, 69, 1);
}

.success-modal .modal-box{
    background: linear-gradient(135deg, rgba(0, 202, 255, 1) 0%, rgba(0, 150, 200, 1) 100%);
}

.success-modal .modal-icon{
    animation: bounce 0.6s ease-out;
}

@keyframes bounce{
    0%{ transform: scale(0); }
    50%{ transform: scale(1.2); }
    100%{ transform: scale(1); }
}

.faq-all{
    padding: 40px 0;
}

.faq-item{
    background-color: white;
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.faq-item:hover{
    box-shadow: 0 5px 20px rgba(0, 202, 255, 0.15);
}

.faq-item.active{
    box-shadow: 0 5px 20px rgba(0, 202, 255, 0.2);
}

.faq-question{
    display: flex;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.faq-question:hover{
    background-color: rgba(248, 252, 255, 1);
}

.faq-q-icon{
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
}

.faq-question span{
    flex: 1;
    color: rgba(28, 28, 28, 1);
    font-weight: 600;
    font-size: 16px;
}

.faq-toggle{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle{
    transform: rotate(180deg);
}

.faq-answer{
    display: none;
    padding: 0 25px 20px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn{
    from{ opacity: 0; transform: translateY(-10px); }
    to{ opacity: 1; transform: translateY(0); }
}

.faq-item.active .faq-answer{
    display: flex;
}

.faq-i-icon{
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.faq-answer span{
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    line-height: 1.6;
}

.privacy-all{
    background-color: white;
    border-radius: 18px;
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    margin: 40px 0;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.privacy-all::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 3px;
    background: linear-gradient(45deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1), rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: border-flow 3s ease infinite;
    z-index: 1;
}

.privacy-all:hover{
    box-shadow: 0 20px 60px rgba(0, 202, 255, 0.15);
    transform: translateY(-5px);
}

.privacy-floating-bg{
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: privacy-float-bg 6s ease-in-out infinite;
    z-index: 0;
}

.privacy-floating-bg-2{
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 255, 150, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: privacy-float-bg-2 5s ease-in-out infinite;
    z-index: 0;
}

@keyframes privacy-float-bg{
    0%, 100%{ transform: translate(0, 0) scale(1); }
    25%{ transform: translate(-20px, 20px) scale(1.1); }
    50%{ transform: translate(-10px, 40px) scale(0.9); }
    75%{ transform: translate(-30px, 10px) scale(1.05); }
}

@keyframes privacy-float-bg-2{
    0%, 100%{ transform: translate(0, 0) scale(1); }
    25%{ transform: translate(20px, -10px) scale(1.1); }
    50%{ transform: translate(40px, -20px) scale(0.9); }
    75%{ transform: translate(10px, -30px) scale(1.05); }
}

.privacy-title{
    text-align: center;
    color: rgba(28, 28, 28, 1);
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
    animation: privacy-title-glow 3s ease-in-out infinite;
}

@keyframes privacy-title-glow{
    0%, 100%{ 
        text-shadow: 0 0 10px rgba(0, 202, 255, 0.3), 0 0 20px rgba(0, 202, 255, 0.2);
        transform: translateY(0);
    }
    50%{ 
        text-shadow: 0 0 20px rgba(0, 202, 255, 0.5), 0 0 40px rgba(0, 202, 255, 0.3);
        transform: translateY(-3px);
    }
}

.privacy-title::after{
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(0, 202, 255, 1), transparent);
    border-radius: 2px;
}

.privacy-content{
    color: rgba(51, 51, 51, 1);
    font-size: 15px;
    line-height: 1.8;
    position: relative;
    z-index: 2;
}

.privacy-content p{
    margin-bottom: 20px;
    text-align: justify;
    transition: all 0.3s ease;
    padding: 10px 0;
    border-radius: 8px;
}

.privacy-content p:hover{
    background-color: rgba(0, 202, 255, 0.03);
    padding-left: 10px;
}

.privacy-content h3{
    color: rgba(28, 28, 28, 1);
    font-weight: 600;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
    transition: all 0.3s ease;
}

.privacy-content h3::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 202, 255, 0.5);
    transition: all 0.3s ease;
}

.privacy-content h3:hover{
    color: rgba(0, 202, 255, 1);
    transform: translateX(5px);
}

.privacy-content h3:hover::before{
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 20px rgba(0, 202, 255, 0.8);
}

.privacy-content h4{
    color: rgba(28, 28, 28, 1);
    font-weight: 500;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
    transition: all 0.3s ease;
}

.privacy-content h4::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: rgba(0, 202, 255, 1);
    border-radius: 50%;
    border: 2px solid rgba(0, 202, 255, 0.3);
    transition: all 0.3s ease;
}

.privacy-content h4:hover{
    color: rgba(0, 202, 255, 1);
    transform: translateX(5px);
}

.privacy-content h4:hover::before{
    transform: translateY(-50%) scale(1.4);
    border-color: rgba(0, 202, 255, 0.6);
}

@keyframes float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}

@keyframes pulse-glow{
    0%, 100%{ box-shadow: 0 0 20px rgba(0, 202, 255, 0.3); }
    50%{ box-shadow: 0 0 40px rgba(0, 202, 255, 0.6); }
}

@keyframes gradient-shift{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

@keyframes rotate-slow{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

@keyframes shine{
    0%{ background-position: -200% center; }
    100%{ background-position: 200% center; }
}

@keyframes bounce-in{
    0%{ transform: scale(0.3); opacity: 0; }
    50%{ transform: scale(1.05); }
    70%{ transform: scale(0.9); }
    100%{ transform: scale(1); opacity: 1; }
}

@keyframes ripple{
    0%{ transform: scale(0); opacity: 1; }
    100%{ transform: scale(4); opacity: 0; }
}

.animate-float{
    animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow{
    animation: pulse-glow 2s ease-in-out infinite;
}

.animate-gradient{
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

.animate-rotate{
    animation: rotate-slow 20s linear infinite;
}

.btn-glow:hover{
    box-shadow: 0 0 30px rgba(0, 202, 255, 0.5), 0 0 60px rgba(0, 202, 255, 0.3);
    transform: translateY(-2px);
}

.card-hover{
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-hover:hover{
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 202, 255, 0.2);
}

.text-glow:hover{
    text-shadow: 0 0 10px rgba(0, 202, 255, 0.8), 0 0 20px rgba(0, 202, 255, 0.6);
}

.shine-effect{
    position: relative;
    overflow: hidden;
}

.shine-effect::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    transition: left 0.6s ease;
}

.shine-effect:hover::before{
    left: 150%;
}

.hover-lift{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.glass-effect{
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ripple-btn{
    position: relative;
    overflow: hidden;
}

.ripple-btn::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 202, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.ripple-btn:hover::after{
    width: 300px;
    height: 300px;
}

.border-glow{
    transition: box-shadow 0.3s ease;
}

.border-glow:hover{
    box-shadow: 0 0 20px rgba(0, 202, 255, 0.4), inset 0 0 20px rgba(0, 202, 255, 0.1);
}

.skew-hover{
    transition: transform 0.3s ease;
    transform-origin: center center;
}

.skew-hover:hover{
    transform: skewX(-5deg) rotate(-2deg);
}

.flip-card{
    perspective: 1000px;
}

.flip-card-inner{
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner{
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back{
    backface-visibility: hidden;
}

.flip-card-back{
    transform: rotateY(180deg);
}

.fade-hover{
    transition: opacity 0.3s ease;
}

.fade-hover:hover{
    opacity: 0.8;
}

.scale-hover{
    transition: transform 0.3s ease;
}

.scale-hover:hover{
    transform: scale(1.1);
}

.color-shift{
    transition: color 0.3s ease, background-color 0.3s ease;
}

.color-shift:hover{
    color: rgba(0, 202, 255, 1) !important;
}

.shadow-pop{
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shadow-pop:hover{
    box-shadow: 0 25px 50px -12px rgba(0, 202, 255, 0.4);
}

@keyframes border-flow{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

@keyframes border-pulse{
    0%, 100%{ opacity: 1; }
    50%{ opacity: 0.5; }
}

@keyframes border-scan{
    0%{ transform: translateX(-100%); }
    100%{ transform: translateX(100%); }
}

@keyframes border-glow{
    0%, 100%{ box-shadow: 0 0 5px rgba(0, 202, 255, 0.5), 0 0 10px rgba(0, 202, 255, 0.3); }
    50%{ box-shadow: 0 0 20px rgba(0, 202, 255, 0.8), 0 0 30px rgba(0, 202, 255, 0.5), 0 0 40px rgba(0, 202, 255, 0.3); }
}

@keyframes image-zoom{
    from{ transform: scale(1); }
    to{ transform: scale(1.1); }
}

@keyframes image-shake{
    0%, 100%{ transform: translateX(0); }
    25%{ transform: translateX(-2px); }
    75%{ transform: translateX(2px); }
}

@keyframes image-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}

@keyframes spin-slow{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

@keyframes gradient-border{
    0%{ background-position: 0% 0%; }
    50%{ background-position: 100% 100%; }
    100%{ background-position: 0% 0%; }
}

@keyframes corner-flash{
    0%{ box-shadow: 5px 5px 0 rgba(0, 202, 255, 1), -5px -5px 0 rgba(0, 202, 255, 1); }
    50%{ box-shadow: -5px 5px 0 rgba(0, 202, 255, 1), 5px -5px 0 rgba(0, 202, 255, 1); }
    100%{ box-shadow: 5px 5px 0 rgba(0, 202, 255, 1), -5px -5px 0 rgba(0, 202, 255, 1); }
}

@keyframes border-draw{
    0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    25%{ clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); }
    50%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%); }
    75%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    100%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes shimmer{
    0%{ transform: translateX(-100%); }
    100%{ transform: translateX(100%); }
}

.image-hover-zoom{
    overflow: hidden;
    position: relative;
}

.image-hover-zoom img{
    transition: transform 0.5s ease;
}

.image-hover-zoom:hover img{
    transform: scale(1.1);
}

.image-hover-rotate{
    overflow: hidden;
    position: relative;
}

.image-hover-rotate img{
    transition: transform 0.5s ease;
}

.image-hover-rotate:hover img{
    transform: rotate(2deg) scale(1.05);
}

.image-hover-float{
    animation: image-float 4s ease-in-out infinite;
}

.image-hover-shake:hover{
    animation: image-shake 0.3s ease-in-out;
}

.image-spin-slow{
    animation: spin-slow 20s linear infinite;
}

.card-border-glow{
    position: relative;
    transition: all 0.3s ease;
}

.card-border-glow::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(45deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1), rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-border-glow:hover::before{
    opacity: 1;
    animation: border-flow 2s ease infinite;
}

.card-border-pulse{
    position: relative;
    transition: all 0.3s ease;
}

.card-border-pulse::before{
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: rgba(0, 202, 255, 1);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-border-pulse:hover::before{
    opacity: 0.5;
    animation: border-pulse 1s ease-in-out infinite;
}

.card-border-scan{
    position: relative;
    overflow: hidden;
}

.card-border-scan::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 202, 255, 0.5), transparent);
    animation: border-scan 2s ease-in-out infinite;
    pointer-events: none;
}

.card-border-neon{
    position: relative;
    transition: all 0.3s ease;
}

.card-border-neon:hover{
    animation: border-glow 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(0, 202, 255, 0.5), 0 0 20px rgba(0, 202, 255, 0.3);
}

.card-corner-flash{
    position: relative;
    transition: all 0.3s ease;
}

.card-corner-flash:hover{
    animation: corner-flash 1s ease-in-out infinite;
}

.card-border-draw{
    position: relative;
}

.card-border-draw::before{
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(0, 202, 255, 1);
    border-radius: inherit;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-border-draw:hover::before{
    opacity: 1;
    animation: border-draw 1s ease-out forwards;
}

.card-shimmer{
    position: relative;
    overflow: hidden;
}

.card-shimmer::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.card-shimmer:hover::after{
    animation: shimmer 1.5s ease-in-out;
}

.card-3d-hover{
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.card-3d-hover:hover{
    transform: perspective(1000px) rotateY(5deg) rotateX(-5deg) translateY(-5px);
}

.card-liquid-border{
    position: relative;
}

.card-liquid-border::before{
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(45deg, rgba(0, 202, 255, 1), rgba(0, 150, 220, 1), rgba(0, 202, 255, 1));
    background-size: 200% 200%;
    animation: gradient-border 3s ease infinite;
    z-index: -1;
    pointer-events: none;
}

.card-liquid-border:hover::before{
    animation: gradient-border 1s ease infinite;
}

.card-radial-glow{
    position: relative;
}

.card-radial-glow::after{
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    pointer-events: none;
}

.card-radial-glow:hover::after{
    opacity: 1;
}

@keyframes slide-in-left{
    from{ transform: translateX(-100px); opacity: 0; }
    to{ transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-right{
    from{ transform: translateX(100px); opacity: 0; }
    to{ transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-up{
    from{ transform: translateY(100px); opacity: 0; }
    to{ transform: translateY(0); opacity: 1; }
}

@keyframes fade-in-scale{
    from{ transform: scale(0.8); opacity: 0; }
    to{ transform: scale(1); opacity: 1; }
}

@keyframes float-slow{
    0%, 100%{ transform: translateY(0px); }
    50%{ transform: translateY(-15px); }
}

@keyframes wobble{
    0%, 100%{ transform: rotate(0deg); }
    15%{ transform: rotate(-5deg); }
    30%{ transform: rotate(5deg); }
    45%{ transform: rotate(-5deg); }
    60%{ transform: rotate(5deg); }
    75%{ transform: rotate(-2deg); }
    90%{ transform: rotate(2deg); }
}

@keyframes shake-light{
    0%, 100%{ transform: translateX(0); }
    20%, 60%{ transform: translateX(-2px); }
    40%, 80%{ transform: translateX(2px); }
}

@keyframes rotate-hover{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

@keyframes typing{
    from{ width: 0; }
    to{ width: 100%; }
}

@keyframes blink-caret{
    from, to{ border-color: transparent; }
    50%{ border-color: rgba(0, 202, 255, 1); }
}

@keyframes pulse-scale{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.05); }
}

@keyframes gradient-flow{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

@keyframes border-dance{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

@keyframes text-float{
    0%, 100%{ transform: translateY(0); text-shadow: 0 0 10px rgba(0, 202, 255, 0.5); }
    50%{ transform: translateY(-5px); text-shadow: 0 0 25px rgba(0, 202, 255, 0.8); }
}

@keyframes sparkle{
    0%, 100%{ opacity: 0; transform: scale(0); }
    50%{ opacity: 1; transform: scale(1); }
}

.animate-slide-in-left{
    animation: slide-in-left 0.8s ease-out forwards;
}

.animate-slide-in-right{
    animation: slide-in-right 0.8s ease-out forwards;
}

.animate-slide-in-up{
    animation: slide-in-up 0.8s ease-out forwards;
}

.animate-fade-in-scale{
    animation: fade-in-scale 0.6s ease-out forwards;
}

.animate-float-slow{
    animation: float-slow 4s ease-in-out infinite;
}

.animate-wobble:hover{
    animation: wobble 0.5s ease-in-out;
}

.animate-shake:hover{
    animation: shake-light 0.3s ease-in-out;
}

.animate-rotate-hover:hover{
    animation: rotate-hover 1s linear;
}

.animate-pulse-scale{
    animation: pulse-scale 2s ease-in-out infinite;
}

.animate-gradient-flow{
    background-size: 200% 200%;
    animation: gradient-flow 3s ease infinite;
}

.animate-text-float{
    animation: text-float 3s ease-in-out infinite;
}

.typing-effect{
    overflow: hidden;
    white-space: nowrap;
    animation: typing 3s steps(40, end);
}

.glow-text{
    text-shadow: 0 0 10px rgba(0, 202, 255, 0.5), 0 0 20px rgba(0, 202, 255, 0.3), 0 0 30px rgba(0, 202, 255, 0.1);
}

.neon-border{
    position: relative;
}

.neon-border::before{
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1), rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    animation: border-dance 3s ease infinite;
    filter: blur(5px);
}

.magnetic-hover{
    transition: transform 0.3s ease;
}

.liquid-button{
    position: relative;
    overflow: hidden;
}

.liquid-button::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    border-radius: 50%;
}

.liquid-button:hover::after{
    width: 400px;
    height: 400px;
}

.confetti{
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: rgba(0, 202, 255, 1);
    animation: fall linear forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes fall{
    to{ transform: translateY(100vh) rotate(720deg); }
}

.scroll-indicator{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(200, 220, 255, 0.2);
    z-index: 9999;
    --fill-width: 0%;
    --ball-left: 0%;
}

.scroll-indicator::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--fill-width);
    background: linear-gradient(90deg, rgba(0, 202, 255, 1), rgba(0, 255, 150, 1));
    border-radius: 0 50% 50% 0;
}

.scroll-indicator::before{
    content: '';
    position: absolute;
    top: 50%;
    left: var(--ball-left);
    width: 14px;
    height: 14px;
    background: rgba(0, 202, 255, 1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 202, 255, 0.8), 0 0 20px rgba(0, 202, 255, 0.5), 0 0 30px rgba(0, 202, 255, 0.3);
}

.floating-elements{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.floating-element{
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 202, 255, 0.3) 0%, transparent 70%);
    animation: float-random linear infinite;
}

@keyframes float-random{
    0%{ transform: translateY(100%) translateX(0); opacity: 0; }
    10%{ opacity: 0.5; }
    90%{ opacity: 0.5; }
    100%{ transform: translateY(-100%) translateX(100px); opacity: 0; }
}