:root {
    --bg-blue: #EDF4FF;
    --logo-dblue: #0F343E;
    --logo-dgold: #E0AA3E;
    --logo-lgold: #E0B924;
    --logo-lblue: #6497D6;
    --logo-circle: #D0E5FF;
    --gray: #E7F0F9;
    --white: #FFFFFF;
    --rare-color: #E8E6F7;
    --lighttext: #6B7C93;
}

.hero-section {
    text-align: center;
    padding: 5rem 2rem 4.5rem 2rem;
    background: linear-gradient(135deg,
            #6497D6 0%,
            #0F343E 100%);
    color: white;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.hero-section h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-section p {
    font-size: 1.2rem;
    max-width: 40rem;
    margin: 0 auto;
}

.cta-wrapper {
    text-align: center;
    background: linear-gradient(135deg,
            var(--logo-circle),
            var(--rare-color));
    padding: 3.5rem 2rem;
    border-radius: 2rem;
    color: var(--logo-dblue);
}

.cta-btn {
    display: inline-block;
    padding: 0.9rem 2rem;
    background: linear-gradient(135deg, #6497D6, #0F343E);
    color: white;
    border-radius: 2em;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.cta-button {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--logo-lblue), var(--logo-dgold));
    padding: 1rem 2rem;
    border-radius: 5rem;
    color: var(--logo-dblue);
    font-weight: 700;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    text-decoration: none;
    font-size: 1.2em;
}

.cta-button:hover {
    box-shadow: 0 1em 2em rgba(224, 185, 36, 0.45);
}