.cta-section {
    padding-top: 6rem;
    padding-bottom: 0;
    position: relative;
}
.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.cta-card {
    background: linear-gradient(135deg, #111113 0%, #26282a 100%);
    border: 1px solid rgb(255, 255, 255, .1);
    border-radius: 20px;
    padding: 80px 64px;
    position: relative;
    overflow: hidden;
}

    .cta-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgb(218, 255, 1, .1) 0, #0000 70%);
        pointer-events: none;
    }

.cta-card::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(218, 255, 1, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-primary);
  border-radius: 20px;
  font-size: 14px;
  color: var(--accent-primary);
  margin-bottom: 24px;
  font-weight: 600;
}

.cta-badge svg {
  color: var(--accent-primary);
}

.cta-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
    margin-bottom: 20px;
}
.cta-title span {
color: #daff01;
}


.cta-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: #dadada;
    margin-bottom: 40px;
}

.cta-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
}
.cta-buttons .btn-primary {
border: none;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
font-size: 16px;
font-weight: 600;
gap: 8px;
min-height: 52px;
overflow: hidden;
padding: 16px 32px;
position: relative;
letter-spacing: 0;
text-transform: capitalize;
text-decoration: none;
transition: all .2s ease;
}

.cta-buttons .btn-primary:hover {
background: #a6be15;
box-shadow: 0 8px 25px #daff014d;
transform: translateY(-2px);
}

.cta-buttons .btn {
border: none;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
font-size: 16px;
font-weight: 600;
gap: 8px;
min-height: 52px;
overflow: hidden;
padding: 16px 32px;
position: relative;
letter-spacing: 0;
text-transform: capitalize;
text-decoration: none;
transition: all .2s ease;
}

    .cta-buttons .btn-outline-primary:hover {
        background: #a6be15;
        box-shadow: 0 8px 25px #daff014d;
        transform: translateY(-2px);
        color: #333;
    }
    .cta-buttons .btn-outline-primary {
        color: #fff;
        border-color: #daff00;
        /* background: linear-gradient(130deg, rgb(78 150 50) 0%, rgb(78 150 50) 45%, rgb(128 173 109) 50%, rgb(78 150 50) 55%, rgb(78 150 50) 100%); */
        background-color: transparent;
        border-color: rgb(51, 51, 51, 1);
        border-width: 1px;
        border-style: solid;
        background-repeat: no-repeat;
        -webkit-background-position: 0px;
        background-position: 0px;
        background-size: 300%;
        animation: button-ani 2s infinite linear;
    }


.cta-buttons .btn-primary:hover:before {
left: 100%;
}

.cta-buttons .btn-primary:before {
background: linear-gradient(90deg, #0000, #fff3, #0000);
content: "";
height: 100%;
left: -100%;
position: absolute;
top: 0;
transition: left .5s;
width: 100%;
}



.cta-note {
  font-size: 14px;
  color: var(--text-muted);
}

@media only screen and (max-width: 1024px) {
    .cta-title {
        font-size: 30px;
        line-height: 1.3;
    }

}



    @media (max-width: 768px) {
        .cta-section {
            padding: 40px 0;
        }

        .cta-card {
            padding: 48px 32px;
        }

        .cta-title {
            font-size: 32px;
        }

        .cta-subtitle {
            font-size: 16px;
        }

            .cta-buttons button {
                width: 100%;
                max-width: 300px;
            }
    }

@media (max-width: 767px) {
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

}