.banner {
    background-color: var(--dark-gray);
    padding-bottom: 15rem;

}

.content-main-banner {
    display: flex;
    flex-direction: row;
}

.imgmotorola {
    height: 6rem;
    margin-top: 10rem;
    margin-left: -24rem;
}

.sub-title-banner {
    padding-top: 10rem;
    color: var(--light);
    font-weight: 300;
    font-size: var(--text-size-lg);
}

.title-banner {
    color: var(--light);
    font-weight: 600;
    font-size: var(--text-size-xl);
}

.paragraph-banner {
    color: var(--light);
    font-weight: 300;
    font-size: var(--text-size-md);
    max-width: 36rem;
}

.link-talk {
    padding-top: 3rem;
}

.talk-to-an-expert {
    color: var(--accent) !important;
    font-size: var(--text-size-md);
}

.img-main-banner {
    height: 25rem;
    margin-left: 10rem;
    margin-top: 6rem;
}

.sub-replenishing-banner-black {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: var(--dark);
    padding-top: 3rem;
    padding-bottom: 1rem;
    margin-top: -11rem;
    gap: 5rem;
    border-radius: 1rem;
}

.title-sub-replinishing {
    color: var(--light);
    font-weight: 600;
    font-size: var(--text-size-lg);
}

.paragaph-sub-replinishing {
    color: var(--light);
    font-weight: 300;
    font-size: var(--text-size-md);
    max-width: 32rem;
}

.sub-title-sub-replinishing {
    color: var(--light);
    font-weight: 600;
    font-size: var(--text-size-lg);

}

.topics-sub-replinishing {
    color: var(--light);
    font-weight: 300;
    font-size: var(--text-size-md);
    max-width: 31rem;
}

.what-is-it-wave {
    padding-bottom: 15rem;
    display: flex;
    flex-direction: row;
}

.what-is-it-wave-left {
    min-width: 40rem;
}
.container-what-is-it-wave{
    margin-bottom: -13rem;
}
.title-what-is-it-wave {
    margin-top: 3rem;
    color: var(--primary);
    font-weight: 600;
    font-size: var(--text-size-xl);
}

.what-is-it-wave-right {
    min-width: 40rem;
    margin-left: 8rem;
}

.paragraph-what-is-it-wave {
    max-width: 35rem;
    margin-top: 3rem;
    color: var(--dark);
    font-weight: 300;
    font-size: var(--text-size-md);
}

.icons {
    padding-top: 5rem;
    display: flex;
    flex-direction: row;
    gap: 5rem;
}

.icons-left {
    display: flex;
    flex-direction: column;
    max-width: 20rem;
}

.icons-right {
    display: flex;
    flex-direction: column;
    max-width: 20rem;
}

.imgicons {
    height: 8rem;
    width: 8rem;
}

.title-icons {
    margin-bottom: 1rem;
    color: var(--dark);
    font-weight: 600;
    font-size: var(--text-size-lg);
}

.paragraph-icons {
    margin-bottom: 1rem;
    color: var(--dark);
    font-weight: 300;
    font-size: var(--text-size-md);
    max-width: 18rem;
}

.icons-correct-what-is-it-wave {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--dark);
    font-size: var(--text-size-lg);
    font-weight: 600;
}

.paragraph-for-icons {
    color: var(--dark);
    font-size: var(--text-size-md);
    font-weight: 300;
    max-width: 35rem;
}

.main-paragraph {
    margin-top: 5rem;
}

.container-resources {
    background-color: var(--dark);
}

.resources {
    display: flex;
    flex-direction: row;
    padding: 3rem;
    padding-bottom: 5rem;
}

.resources-title {
    color: var(--light);
    font-size: var(--text-size-lg);
    font-weight: 600;
}

.resources-paragraph {
    color: var(--light);
    font-size: var(--text-size-md);
    font-weight: 300;
    max-width: 25rem;

}

.resources-left {
    max-width: 30rem;
}

.resources-right {
    border-radius: 1rem;
    padding: 1rem;
    background-color: var(--dark-gray);
    margin-left: 3.5rem;
}

.dot-orange {
    width: 12px;
    height: 12px;
    background-color: #ff8c00;
    border-radius: 50%;
    display: inline-block;
}

.dot-green {
    width: 12px;
    height: 12px;
    background-color: #00e65a;
    border-radius: 50%;
    display: inline-block;
}

.resources-table.table {
    --bs-table-bg: var(--dark-gray);
    --bs-table-color: #ffffff;
    --bs-table-border-color: #ffffff;
}


.resources-table tbody tr:hover {
    --bs-table-accent-bg: var(--gray) !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.resources-table td,
.resources-table th {
    padding: 1rem 0.75rem;
    vertical-align: middle;
}

.card-solo-performance {
    background-color: var(--dark);
    padding-bottom: 15rem;
}

.card-main {
    background-color: var(--dark-gray);
    border-radius: 1.5rem;
    padding: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 83rem;
    margin: 0 auto;
    margin-bottom: -14rem;
}

.card-content-left {
    flex: 1.2;
    max-width: 650px;
}

.title-card {
    color: var(--light);
    font-size: var(--text-size-xl);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.text-card {
    color: #b0b0b0;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.btn-agende {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--accent);
    color: #000 !important;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 1rem;
}

.card-content-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.image-container {
    position: relative;
    max-width: 400px;
}

@media (max-width: 992px) {

    .content-main-banner,
    .resources,
    .performance-main,
    .main-percentage {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .icons {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 0rem;
        margin-top: -2rem !important;
    }

    .icons-right {
        margin-top: -4rem;
    }

    .what-is-it-wave {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 0rem;
    }

    .sub-replenishing-banner {
        margin-top: -4rem;
    }

    .sub-replenishing-banner-black {
        max-width: 100%;
        margin-top: -3rem;

    }
    .main-paragraph{
        margin-bottom: 15rem;
    }
    .resources-table,
    .resources-table thead,
    .resources-table tbody,
    .resources-table th,
    .resources-table td,
    .resources-table tr {
        display: block !important;
        width: 100% !important;
    }

    .card-main {
        background-color: var(--dark-gray);
        border-radius: 1.5rem;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 22rem;
        margin: 0 auto;
        
    }
    .img-fluid{
        margin-top: 2rem;
        height: 15rem;
        width: auto;
    }

    .what-is-it-wave {
        padding-bottom: 2rem;
        display: flex;
        flex-direction: row;
    }

    .resources-table thead {
        display: none !important;
    }

    .resources-table tr {
        margin-bottom: 2rem;
        border-bottom: 1px solid #333 !important;
        padding-bottom: 1rem;
    }

    .resources-table td {
        border: none !important;
        text-align: center !important;
    }

    .resources-table td:first-child {
        font-weight: 600;
        padding-bottom: 0.5rem !important;
        font-size: 1rem !important;
    }

    .resources-table td:not(:first-child) {
        display: inline-block !important;
        width: 48% !important;
    }

    .banner {
        padding-bottom: 5rem;
    }

    .paragraph-banner,
    .paragaph-sub-replinishing,
    .paragraph-what-is-it-wave,
    .icons-correct-what-is-it-wave,

    .resources-title,
    .topics-sub-replinishing,
    .paragraph-for-icons,
    .resources-paragraph {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .imgmotorola {
        margin: 2rem auto 0 auto;
        display: block;
        height: 4rem;
    }

    .img-main-banner {
        margin: 3rem auto 0 auto;
        display: block;
        max-width: 20rem;
        height: auto;
        width: 100%;
    }


    .what-is-it-wave-left,
    .what-is-it-wave-right {
        min-width: 100% !important;
        margin-left: 0 !important;
    }


    .imgicons {
        margin: 0 auto 1rem auto;
    }

    .resources-left {
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .resources-right {
        margin-left: 0 !important;
        min-width: 22rem;
    }

    .title-what-is-it-wave {
        margin-top: 1rem;
        color: var(--primary);
        font-weight: 600;
        font-size: var(--text-size-xl);
    }

    .resources-table td:nth-child(2):has(.dot-orange)::after {
        content: "WAVE PTX™";
        display: block;
        font-size: 0.7rem;
        color: var(--light);
        margin-top: 5px;
    }

    .resources-table td:nth-child(3):has(.dot-green)::after {
        content: "WAVE PTX™ Safeguard";
        display: block;
        font-size: 0.7rem;
        color: var(--light);
        margin-top: 5px;
    }
}