/* Hero Section */
.hero-section {
    background-image: url('../images/about/bg.webp');
    background-size: cover;
    background-position: center;
    padding: 8rem 0;
    color: var(--black-5);
}

.hero-section h1{
    font-size: 3.5rem;
    font-weight: 700;
}
.hero-section p{
    font-size: 1.2rem;
    margin-bottom: 0;
    font-weight: 400;
}

/* Mission Section */
.mission-section {
    padding: 5rem 0 0 0;
}

.missingImg{
    width: 90%;
}

.mission-section h2{
    font-size: 2.5rem;
    color: var(--secondary-100);
    font-weight: 700;
}

.mission-section h6{
    color: var(--primary-100);
    font-weight: 700;
    letter-spacing: 5px;
}

.mission-section p{
    color: var(--text-primary);
    font-size: 1.1rem;
}

.register-key {
    background-color: var(--primary-100);
    color: var(--black-5);
    margin-right: 1rem;
    padding: 10px 30px;
}

.register-key:hover {
    background-color: var(--primary-100);
    color: var(--black-5);
    margin-right: 1rem;
    padding: 10px 30px;
}


/* Why Choose Us */
.why-choose-us {
    padding: 5rem 0;
}

.why-choose-us h2{
    font-size: 2.5rem;
    color: var(--secondary-100);
    font-weight: 700;
}

.why-choose-us h6{
    color: var(--primary-100);
    font-weight: 700;
    letter-spacing: 5px;
}

.why-choose-us h3{
    font-weight: 700;
    color: var(--text-primary);
}

.why-choose-us small{
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--pink-100);
}

.why-choose-us .step-card {
    padding: 1.9rem;
    border-radius: 10px;
    border: 0.6px solid #212529BF;
    min-height: 100%;
}

.why-choose-us p{
    color: var(--text-primary);
    font-size: 1.1rem;
}

/* CTA Section */
.cta-section {
    padding: 0rem 0;
}

.cta-section .match-card {
    padding: 1.9rem 0rem  0 0rem ;
    min-height: 100%;
    background: var(--bg-color);
    border-radius: 10px;
    position:relative; 
    overflow:hidden;
}

.cta-section h2{
    font-size: 2.5rem;
    color: var(--secondary-100);
    font-weight: 700;
}

.cta-section p{
    font-size: 1.1rem;
    color: var(--text-primary);
}

.cta-section img{
    border-radius: 10px;
}

.btn-register {
    background-color: #000;
    color: var(--black-5);
    margin-right: 1rem;
    padding: 10px 30px;
}

.btn-register:hover {
    background-color: #000;
    color: var(--black-5);
    margin-right: 1rem;
    padding: 10px 30px;
}

.btn-support {
    border: 1px solid #000;
    color: #000;
    padding: 10px 30px;

}

.btn-support:hover {
    border: 1px solid #000;
    color: #000;
    padding: 10px 30px;

}

.cta-section .banner{
    white-space: nowrap;
    animation: bannermove 20s linear infinite;
}

.bannerImg1{
    width: 100%;
}

.bannerImg2{
    width: 100%;
}

@keyframes bannermove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

/* Testimonial */
.testimonial {
    padding: 5rem 0;
}

.testimonial h2{
    font-size: 2.5rem;
    color: var(--secondary-100);
    font-weight: 700;
}

.testimonial h6{
    color: var(--primary-100);
    font-weight: 700;
    letter-spacing: 5px;
}

.testimonial img {
    border-radius: 10px;
    margin-bottom: 1rem;
}

.testimonial .card h6{
    letter-spacing: normal;
    color: var(--text-primary-75);
    font-weight: 500;
}

.testimonial .card p{
    color: var(--text-primary-75);
    font-weight: 400;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .btn-register {
        width: 100%;
    }
    .btn-support {
        width: 100%;
    }

    .bannerImg1{
        width: 300%;
    }
    
    .bannerImg2{
        display: none;
    }

    @keyframes bannermove {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(-150%, 0);
        }
    }

    .missingImg{
        width: 100%;
    }
}