#header{
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-title {
    width: 617px;
}

.box-title p {
    color: #FFF;
    opacity: 80%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    margin-top: 17px;
}

.white-h1{
    font-size: 36px;
    text-align: center;
    font-weight: 500;
}

input[type="radio"] {
    display: none; 
}

.radio-label {
    padding: 8px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    width: 96px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin-right: 8px;
    transition: 0.2s ease;
}

.btn-mensal,
.btn-anual {
    background-color: #0C2A44;
    color: #FFF;
    border: 1px solid #0C2A44;
}

input[type="radio"]:checked + .btn-mensal,
input[type="radio"]:checked + .btn-anual {
    background-color: #FFF;
    color: #0C2A44;
}

.dark-card {
    background-color: #041823;
}

.light-card{
    background-color: #FFF;
}

.card-plan {
    border-radius: 10px;
    padding: 30px;
    margin-top: -222px;
    box-shadow: 0px 4px 10px 0px #00000040;
}

ul.plan-features {
    list-style: none;
    padding: 0px;
    margin-top: 32px;
}

h2.white-title {
    font-size: 18px;
    font-weight: 500;
}

h3.white-value {
    margin-top: 22px;
    color: #FFF;
    font-weight: 700;
    font-size: 32px;
}

p.white-info {
    margin-top: 17px;
    color: #FFF;
    opacity: 60%;
    font-size: 14px;
    font-weight: 500;
}

.text-white li p{
    color: #FFF;
    display: inline-block;
    margin-left: 10px;
    opacity: 60%;
}
p.text-economia-white {
    color: #FFF;
}
a.btn-light-blue {
    text-align: center;
    width: 100%;
    display: block;
    text-transform: uppercase;
    background-color: #00A3FF;
    padding: 10px;
    border-radius: 6px;
    color: #FFF;
    font-weight: 600;
}


h2.dark-title {
    font-size: 18px;
    font-weight: 500;
    color: #2A2A2A;
}

h3.dark-value {
    margin-top: 22px;
    color: #092E4E;
    font-weight: 700;
    font-size: 32px;
}

p.dark-info {
    margin-top: 17px;
    color: #2A2A2A99;
    opacity: 60%;
    font-size: 14px;
    font-weight: 500;
}

.text-dark li p{
    color: #2A2A2A99;
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
}

a.btn-dark-blue {
    text-align: center;
    width: 100%;
    display: block;
    text-transform: uppercase;
    background-color: #092E4E;
    padding: 10px;
    border-radius: 6px;
    color: #FFF;
    font-weight: 600;
}

.obs{
    color: #0C2A4499;
    font-size: 12px;
    font-weight: 600;
}
.info{
    color: #2A2A2A;
    font-weight: 700;
    font-size: 12px;
}

hr {
    color: #000;
    opacity: 5%;
    margin: 15px !important;
}

span.black {
    color: #000;
    font-weight: bold;
}
@media (min-width: 350px) and (max-width: 768px){
    .card-plan{
        margin-top: -150px;
    }

    .light-card{
        margin-top: 30px;
    }

}


@media (min-width: 768px) and (max-width: 992px){

}

@media (min-width: 992px) and (max-width: 1200px) {

}