/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100vw;
}

body {
    width: 100vw!important;
    font-family: 'Raleway', sans-serif!important;
    line-height: 1.6!important;
    /* background-color: #121212!important; */
    color: #f5f5f5!important;
    overflow-x: hidden!important;
    background-color: #00010E!important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%2300010E'/%3E%3Cstop offset='1' stop-color='%2300010E'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.06'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E")!important;
    background-attachment: fixed!important;
    background-size: cover!important;
}

/* Hero Section */

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
    z-index: 1;
}

.hero h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: #00d9ff;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 15px rgba(0, 217, 255, 0.8);
}
.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #efecec;
    position: relative;
    z-index: 2;
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: #efecec;
    position: relative;
    z-index: 2;
}

.hero button {
    background: linear-gradient(45deg, #e56e2a, #ffc53f);
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 30px;
    /* box-shadow: 0 0 15px #ff4d00; */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(0, 217, 255, 1);
}

/* Hero Section */
.hero {
    min-height: 100vh; /* Garante que o hero ocupe pelo menos 100% da altura da janela */
    width: 100vw;
    display: flex;
    flex-direction: column; /* Alinha o conteúdo em coluna */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: flex-start; /* Empurra o conteúdo para baixo */
    text-align: center;
    position: relative;
    background-color: #000428;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23000428'/%3E%3Cstop offset='1' stop-color='%23004E92'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    padding-top: 60px; /* Adiciona um espaçamento superior */
}

.hero .logo {
    margin-top: -16px;
    max-width: 120px; /* Ajuste o tamanho do logo */
    margin-bottom: 10px; /* Espaçamento abaixo do logo */
}

/* Responsividade */
@media (max-width: 768px) {
    .hero h2 {
        font-size: 1.8rem; /* Reduz o tamanho da fonte */
        padding: 0 1rem; /* Adiciona espaço nas laterais */
    }
    .hero h1 {
        font-size: 1.8rem; /* Reduz o tamanho da fonte */
        padding: 0 1rem; /* Adiciona espaço nas laterais */
    }

    .hero .cta-button {
        padding: 1rem 2rem; /* Ajusta o tamanho do botão */
        font-size: 1rem; /* Ajusta o tamanho da fonte do botão */
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}


/* Features Section */
.features {
    padding: 4rem 0;
    text-align: center;
}

.features h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #00d9ff;
}

.features .cards {
    display: flex;
    gap: 1.5rem;
    justify-content: space-around;
}

.features .card {
    background: #1f1f1f;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    flex: 1;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.features .card:hover {
    transform: translateY(-10px);
}

.features .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #00d9ff;
}

.features h5 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

/* Texto H2 */
.cta h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

/* Destaque do preço */
.price-box {
    width: min-content;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.price {
    font-size: 2rem;
    font-weight: bold;
}

/* Lista de benefícios */
.benefits-list {
    list-style-type: none;
    padding: 0;
    font-size: 1.2rem;
    margin: 0;
    color: #fff;
}

.benefits-list li {
    margin-bottom: 0.5rem;
}

/* Botão */
.cta button {
    background: linear-gradient(45deg, #e56e2a, #ffc53f);
    color: #ffffff;
    border: none;
    padding: 12px 12px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta button:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px #000000cc;
}

.cta {
    background: linear-gradient(135deg, #004892cc, #000428e6); /* Gradiente azul escuro */
    color: #ffffff; /* Texto claro para contraste */
    text-align: left;
    padding: 2rem 2rem;
    border-radius: 20px;
    border: 2px solid #004e92; /* Destaque da borda */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease, border 0.3s ease;
}


/* Configurações exclusivas do plano básico */
.basic-plan {
    border: 2px solid #004e92; /* Borda azul */
}

.basic-plan:hover {
    border: 2px solid #045ba6;
    box-shadow: 0 0 20px #004e92;
}

.basic-plan button {
    background: linear-gradient(45deg, #769bbe, #8db4d9)!important;
    color: #000;
}

/* Configurações exclusivas do plano premium */
.premium-plan {
    border: 2px solid #e56e2a; /* Borda laranja */
}

.premium-plan:hover {
    border-color: #e56e2a; /* Cor mais escura no hover */
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.5);
}

/* Tag "Mais Vendido" */
.badge {
    position: absolute;
    margin-top: -46px;
    background-color: #ff4500; /* Vermelho vibrante */
    color: #ffffff;
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 8px;
    font-size: 0.9rem!important;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}



/* Responsividade para os cards */
.features .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center; /* Centraliza os itens */
}

.features .card {
    flex: 1 1 calc(33.333% - 1.5rem); /* Cada card ocupa 1/3 do espaço disponível, com margem */
    max-width: calc(33.333% - 1.5rem);
}

/* Mobile: empilhar os cards */
@media (max-width: 768px) {
    .features .card {
        flex: 1 1 100%; /* Cada card ocupa 100% da largura */
        max-width: 100%;
    }
}

.method-card {
    background-color: #333;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    color: #fff;
    max-width: 800px;
    margin: 0 auto;
}

.method-intro {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #ccc;
}

.steps-list {
    list-style: none;
    padding: 0;
    line-height: 1.8;
}

.steps-list li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #eee;
}

.steps-list strong {
    color: #0099ff;
}

/* Responsividade */
@media (max-width: 767px) {
    .col-md-2 {
        max-width: 100%;
    }
}

.headOfertas {
    width: 100%;
    height: 3rem;
    background-color: #ff4d00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-section {
    background-color: #1a1a1a;
    color: #fff;
    padding: 50px 20px;
}

.bonus-section h2 {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    color: orange;
    margin-bottom: 30px;
}
.bonus-section button {
    background: linear-gradient(45deg, #e56e2a, #ffc53f);
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 30px;
    box-shadow: 0 0 15px rgba(1, 32, 37, 0.8);
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bonus-item {
    background-color: #2b2b2b;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bonus-item:hover {
    transform: scale(1.05);
}

.bonus-image {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.bonus-item h3 {
    font-size: 1.5rem;
    margin-top: 10px;
    color: #fff;
}

.bonus-price {
    margin-top: 10px;
    font-size: 1.2rem;
}

.old-price {
    font-size: 1.3rem;
    text-decoration: line-through;
    color: #ff6b6b;
    margin-right: 10px;
}

.current-price {
    font-size: 1.4rem;
    color: #00ff7f;
    font-weight: bold;
}

.seguro {
    background-color: #00d9ff;
    color: #fff;
    padding: 20px 20px;
}

.seguro h2 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #004466;
    text-transform: uppercase;
}

.seguro img {
    max-width: 80%;
}

.seguro .lead {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
    color: #002b33;
}

/* Remove igual altura */
.row.justify-content-center.gap-4 {
    align-items: flex-start; /* Cada coluna ajusta-se ao conteúdo */
    gap: 2rem;
}