body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100vh; /* Define a altura do corpo como 100% da viewport height */
    display: flex; /* Usa flexbox para controlar o layout */
    flex-direction: column; /* Coloca os elementos filhos em uma coluna */
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

header {
    display: flex;
    justify-content: center;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */

}

.container {
    width: 100%;
    max-width: 1280px;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.heading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
    
}

.heading .logo {
    width: 120px;
    height: auto;
}

.heading nav ul {
    display: flex;
    list-style: none;
}

.heading nav ul li {
    text-transform: uppercase;
    margin: 0px 20px;
}

.heading a {
    text-decoration: none;
    color: black;
}

.heading .logo-mobile {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 60px;
    height: 50px;
}

.heading .logo-mobile div {
    width: 45px;
    height: 5px;
    background-color: #000;
}

.contact-us {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-us i {
    font-size: 50px;
    margin: 0px 10px;
    color: #00e676;
}

.contact-us div {
    text-align: center;
}

.banner {
    margin: 1%;
    display: flex;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    justify-content: center;
}

.banner .fundo-blue {
    display: flex;
    background-color: rgb(255, 255, 255);
    width: 100vw;
    justify-content: center;
}

.banner .fundo-blue .container {
    display: flex;
}

.banner-content {
    flex: 1;
    padding: 120px 20px 150px 20px;
}

.banner-content h1 {
    font-size: 45px;

    display: flex;
    justify-content: center;
    background-image: linear-gradient(145deg, #2dc3e7 0%, #3496bb 100%);
    margin-top: 100px;


}

/*LOGO PRINCIPAL*/
.logo {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 117px;
    height: auto;
    z-index: 2;

}

.logo img {
    position: relative;
    width: 265px;
    height: auto;
}

.banner-content div {
    font-size: 20px;
    margin: 0px 0px 30px 0px;
    color: #FFF;
}

.banner-content a {
    text-decoration: none;
    background-color: #3496bb;
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    padding: 5px 20px;
    border-radius: 10px;
}

.banner-img {
    flex: 1;
    background-position: center;
    background-size: cover;
}


.container {
    width: 100%;
    max-width: 1280px;
}

.heading {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100px;
}

.heading .logo {
    width: 120px;
    height: auto;
}

.heading .logo img {
    width: inherit;
    height: auto;
}

.heading nav ul {
    display: flex;
    list-style: none;
}

.heading nav ul li {
    text-transform: uppercase;
    margin: 0px 20px;
}

.heading a {
    text-decoration: none;
    color: black;
}

.heading .logo-mobile {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 60px;
    height: 50px;
}

.heading .logo-mobile div {
    width: 45px;
    height: 5px;
    background-color: #000;
}

.contact-us {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-us i {
    font-size: 50px;
    margin: 0px 10px;
    color: #00e676;
}

.contact-us div {
    text-align: center;
}

.banner {
    display: flex;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    justify-content: center;
}

.banner .fundo-blue {
    display: flex;
    background-color: rgb(255, 255, 255);
    width: 100vw;
    justify-content: center;
}

.banner .fundo-blue .container {
    display: flex;
}

.banner-content {
    flex: 1;
    padding: 120px 20px 150px 20px;
}

.banner-content h1 {
    font-size: 45px;
    color: #FFF;
}

.banner-content div {
    font-size: 20px;
    margin: 0px 0px 30px 0px;
    color: #FFF;
}

.banner-content a {
    text-decoration: none;
    background-color: #3496bb;
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    padding: 5px 20px;
    border-radius: 10px;
}

.banner-img {
    flex: 1;
    background-position: center;
    background-size: cover;
}

.planos {
    display: flex;
    justify-content: center;
    padding-bottom: 90px;
}

.planos .gradient-text {
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.planos .beneficios {
    display: flex;
    justify-content: center;
    align-items: center;
}

.planos .beneficios div {
    display: flex;
    /* flex-direction: row; */
    padding: 5px 30px;
    /* margin-top: 30px; */
    /* width: 50vw; */
    /* align-items: baseline; */
    /* flex-direction: row; */
    /* flex-wrap: nowrap; */
    align-content: stretch;
    justify-content: space-evenly;
}

.planos .beneficios div i {
    font-size: 40px;
    width: 40px;
    margin-right: 20px;
    padding-top: 10px;
}

.planos .beneficios div img {
    width: 40px;
    margin-right: 17px;
}

.planos .beneficios div span {
    font-size: 20px;
    font-weight: 600;
}

.planos .beneficios div p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #000;
}

.planos .beneficios .bordas-laterais {
    border-left: 3px solid #aaa;
    border-right: 3px solid #aaa;
}

.planos .planos-valores {
    display: flex;
}

.planos .planos-valores .plano-100mega,
.planos .planos-valores .plano-200mega,
.planos .planos-valores .plano-300mega {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #eee;
    margin: 20px;
    padding: 20px;
    width: 17vw;
    align-items: center;
    border-radius: 10px;
}

.planos .planos-valores .plano-100mega div,
.planos .planos-valores .plano-200mega div,
.planos .planos-valores .plano-300mega div {
    display: flex;
    width: 60%;
    align-items: center;
    padding: 5px 0px;
    border-bottom: 1px solid #aaa;
}

.planos .planos-valores .plano-100mega div:last-of-type,
.planos .planos-valores .plano-200mega div:last-of-type,
.planos .planos-valores .plano-300mega div:last-of-type {
    border-bottom: none;
}

.planos .planos-valores .plano-100mega div:last-of-type i,
.planos .planos-valores .plano-200mega div:last-of-type i {
    color: #aaa;
}

.planos .planos-valores .plano-100mega div:last-of-type span,
.planos .planos-valores .plano-200mega div:last-of-type span {
    color: #aaa;
}

.planos .planos-valores .plano-100mega h2,
.planos .planos-valores .plano-200mega h2,
.planos .planos-valores .plano-300mega h2 {
    font-size: 32px;
    margin-bottom: 0;
    margin-top: 0;
    color: #3496bb;
}

.planos .planos-valores .plano-100mega h3,
.planos .planos-valores .plano-200mega h3,
.planos .planos-valores .plano-300mega h3 {
    font-size: 25px;
    font-weight: 600;
    margin: 10px 0px;
    text-align: center;
    line-height: 30px;
}

.planos .planos-valores .plano-100mega div i,
.planos .planos-valores .plano-200mega div i,
.planos .planos-valores .plano-300mega div i {
    font-size: 18px;
    color: #3496bb;
}

.planos .planos-valores .plano-100mega div span,
.planos .planos-valores .plano-200mega div span,
.planos .planos-valores .plano-300mega div span {
    margin-left: 10px;
    font-size: 16px;
}

.planos .planos-valores .plano-100mega a,
.planos .planos-valores .plano-200mega a,
.planos .planos-valores .plano-300mega a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    padding: 5px 20px;
    margin-top: 20px;
    border-radius: 20px;
}

.planos .planos-valores .plano-100mega a:hover,
.planos .planos-valores .plano-200mega a:hover,
.planos .planos-valores .plano-300mega a:hover {
    box-shadow: 0px 1px 10px #000;
}

.mais-planos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mais-planos h2 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mais-planos h3 {
    font-size: 16px;
    font-weight: 400;
    margin-top: -7px;
    color: #3496bb;
}

.mais-planos a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    padding: 5px 20px;
    margin-top: 10px;
    border-radius: 20px;
}

.mais-planos a:hover {
    box-shadow: 0px 1px 10px #000;
}

.sobre-nos {
    display: flex;
    justify-content: center;
    padding: 70px 0px;
    background-color: #65a4cf;
}

.sobre-nos .container {
    display: flex;
}

.sobre-nos .sobre-nos--img {
    display: flex;
    max-width: 450px;
    margin: 50px;
    background-color: #FFF;
    align-items: center;
    padding-left: 30px;
}

.sobre-nos .sobre-nos--img img {
    max-width: inherit;
}

.sobre-nos .sobre-nos--text {
    margin: 50px;
}

.sobre-nos .sobre-nos--text h2 {
    font-size: 32px;
    margin-bottom: 0;
    color: #000;
}

.sobre-nos .sobre-nos--text p {
    font-size: 16px;
    color: #FFF;
}

.fale-conosco {
    display: flex;
    justify-content: center;
    padding: 20px 0px;
}

.fale-conosco .container {
    display: flex;
}

.fale-conosco .fale-conosco--form {
    margin: 50px;
}

.fale-conosco .fale-conosco--form form {
    display: flex;
    flex-direction: column;
}

.fale-conosco .fale-conosco--form h2 {
    font-size: 30px;
    color: #3496bb;
}

.fale-conosco .fale-conosco--form span {
    font-size: 16px;
    margin-bottom: 20px;
}

.fale-conosco .fale-conosco--form input {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 20px;
    font-size: 16px;
}

.fale-conosco .fale-conosco--form textarea {
    padding: 10px;
    margin-bottom: 15px;
    height: 200px;
    border-radius: 20px;
    font-size: 16px;
}

.fale-conosco .fale-conosco--form button {
    font-size: 16px;
    color: #FFF;
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    padding: 10px 50px;
    margin: 20px 130px;
    border-radius: 20px;
    cursor: pointer;
    border: none;
}

.fale-conosco .fale-conosco--form button:hover {
    box-shadow: 0px 1px 10px #000;
}

.fale-conosco .fale-conosco--mapa {
    display: flex;
    flex-direction: column;
    margin: 50px;
    background-color: #FFF;
    align-items: center;
    justify-content: center;
    padding-left: 30px;
    width: 600px;
    height: 570px;
}

.fale-conosco .fale-conosco--mapa iframe {
    width: inherit;
    height: inherit;
}

.fale-conosco .fale-conosco--mapa div {
    font-size: 16px;
    margin-top: 20px;
}

.apresentacao_final span {
    font-size: 16px;
    color: #FFF;
    line-height: 30px;
    width: 351.88px;
    margin: 30px 0px;
}

.icone_whats,
.icone_face,
.icone_insta {
    display: flex;
    width: 50px;
    height: 50px;
    background-color: #FFF;
    color: #3496bb;
    border-radius: 25px;
    margin: 10px;
    font-size: 25px;
}

.apresentacao_final i {
    margin: auto;
}

.unidades h4 {
    font-size: 20px;
}

.unidade_address {
    display: flex;
    align-items: center;
    line-height: 22px;
    margin-bottom: 10px;
}

.unidade_phone {
    display: flex;
    align-items: center;
}

.unidade_address div {
    font-size: 30px;
    margin-right: 20px;
}

.unidade_phone div {
    font-size: 30px;
    margin-right: 20px;
}

.icone_whats,
.icone_face,
.icone_insta {
    font-size: 24px;
}

.unidades {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.unidades h4 {
    margin-bottom: 10px;
    font-size: 20px;
}


.apresentacao_final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.apresentacao_final img {
    max-width: 200px;
}

.icons_redes_sociais {
    display: flex;
    gap: 10px;
}



.unidade_address,
.unidade_phone {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.unidade_address i,
.unidade_phone i {
    margin-right: 5px;
}

.planos {
    display: flex;
    justify-content: center;
    padding-bottom: 60px;
}

.planos .gradient-text {
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


.planos .planos-valores {
    display: flex;
}

.planos .planos-valores .plano-100mega,
.planos .planos-valores .plano-200mega,
.planos .planos-valores .plano-300mega {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #eee;
    margin: 20px;
    padding: 20px;
    width: 17vw;
    align-items: center;
    border-radius: 10px;
}

.planos .planos-valores .plano-100mega div,
.planos .planos-valores .plano-200mega div,
.planos .planos-valores .plano-300mega div {
    display: flex;
    width: 60%;
    align-items: center;
    padding: 5px 0px;
    border-bottom: 1px solid #aaa;
}

.planos .planos-valores .plano-100mega div:last-of-type,
.planos .planos-valores .plano-200mega div:last-of-type,
.planos .planos-valores .plano-300mega div:last-of-type {
    border-bottom: none;
}

.planos .planos-valores .plano-100mega div:last-of-type i,
.planos .planos-valores .plano-200mega div:last-of-type i {
    color: #aaa;
}

.planos .planos-valores .plano-100mega div:last-of-type span,
.planos .planos-valores .plano-200mega div:last-of-type span {
    color: #aaa;
}

.planos .planos-valores .plano-100mega h2,
.planos .planos-valores .plano-200mega h2,
.planos .planos-valores .plano-300mega h2 {
    font-size: 32px;
    margin-bottom: 0;
    margin-top: 0;
    color: #3496bb;
}

.planos .planos-valores .plano-100mega h3,
.planos .planos-valores .plano-200mega h3,
.planos .planos-valores .plano-300mega h3 {
    font-size: 25px;
    font-weight: 600;
    margin: 10px 0px;
    text-align: center;
    line-height: 30px;
}

.planos .planos-valores .plano-100mega div i,
.planos .planos-valores .plano-200mega div i,
.planos .planos-valores .plano-300mega div i {
    font-size: 18px;
    color: #3496bb;
}

.planos .planos-valores .plano-100mega div span,
.planos .planos-valores .plano-200mega div span,
.planos .planos-valores .plano-300mega div span {
    margin-left: 10px;
    font-size: 16px;
}

.planos .planos-valores .plano-100mega a,
.planos .planos-valores .plano-200mega a,
.planos .planos-valores .plano-300mega a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    padding: 5px 20px;
    margin-top: 20px;
    border-radius: 20px;
}

.planos .planos-valores .plano-100mega a:hover,
.planos .planos-valores .plano-200mega a:hover,
.planos .planos-valores .plano-300mega a:hover {
    box-shadow: 0px 1px 10px #000;
}

.mais-planos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mais-planos h2 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mais-planos h3 {
    font-size: 16px;
    font-weight: 400;
    margin-top: -7px;
    color: #3496bb;
}

.mais-planos a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    padding: 5px 20px;
    margin-top: 10px;
    border-radius: 20px;
}

.mais-planos a:hover {
    box-shadow: 0px 1px 10px #000;
}


.planos .planos-valores .plano-100megasimples,
.planos .planos-valores .plano-200megasimples,
.planos .planos-valores .plano-300megasimples {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #eee;
    margin: 20px;
    padding: 20px;
    width: 17vw;
    align-items: center;
    border-radius: 10px;
}

.planos .planos-valores .plano-100megasimples div,
.planos .planos-valores .plano-200megasimples div,
.planos .planos-valores .plano-300megasimples div {
    display: flex;
    width: 60%;
    align-items: center;
    padding: 5px 0px;
    border-bottom: 1px solid #aaa;
}

.planos .planos-valores .plano-100megasimples div:last-of-type,
.planos .planos-valores .plano-200megasimples div:last-of-type,
.planos .planos-valores .plano-300megasimples div:last-of-type {
    border-bottom: none;
}

.planos .planos-valores .plano-100megasimples div:last-of-type i,
.planos .planos-valores .plano-200megasimples div:last-of-type i {
    color: #aaa;
}

.planos .planos-valores .plano-100megasimples div:last-of-type span,
.planos .planos-valores .plano-200megasimples div:last-of-type span {
    color: #aaa;
}

.planos .planos-valores .plano-100megasimples h2,
.planos .planos-valores .plano-200megasimples h2,
.planos .planos-valores .plano-300megasimples h2 {
    font-size: 32px;
    margin-bottom: 0;
    margin-top: 0;
    color: #3496bb;
}

.planos .planos-valores .plano-100megasimples h3,
.planos .planos-valores .plano-200megasimples h3,
.planos .planos-valores .plano-300megasimples h3 {
    font-size: 25px;
    font-weight: 600;
    margin: 10px 0px;
    text-align: center;
    line-height: 30px;
}

.planos .planos-valores .plano-100megasimples div i,
.planos .planos-valores .plano-200megasimples div i,
.planos .planos-valores .plano-300megasimples div i {
    font-size: 18px;
    color: #3496bb;
}

.planos .planos-valores .plano-100megasimples div span,
.planos .planos-valores .plano-200megasimples div span,
.planos .planos-valores .plano-300megasimples div span {
    margin-left: 10px;
    font-size: 16px;
}

.planos .planos-valores .plano-100megasimples a,
.planos .planos-valores .plano-200megasimples a,
.planos .planos-valores .plano-300megasimples a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    padding: 5px 20px;
    margin-top: 20px;
    border-radius: 20px;
}

.planos .planos-valores .plano-100megasimples a:hover,
.planos .planos-valores .plano-200megasimples a:hover,
.planos .planos-valores .plano-300megasimples a:hover {
    box-shadow: 0px 1px 10px #000;
}

.planos .planos-valores .plano-100megasimples,
.planos .planos-valores .plano-200megasimples,
.planos .planos-valores .plano-300megasimples {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #eee;
    margin: 20px;
    padding: 20px;
    width: 17vw;
    align-items: center;
    border-radius: 10px;
}

.planos .planos-valores .plano-100megasimples div,
.planos .planos-valores .plano-200megasimples div,
.planos .planos-valores .plano-300megasimples div {
    display: flex;
    width: 60%;
    align-items: center;
    padding: 5px 0px;
    border-bottom: 1px solid #aaa;
}

.planos .planos-valores .plano-100megasimples div:last-of-type,
.planos .planos-valores .plano-200megasimples div:last-of-type,
.planos .planos-valores .plano-300megasimples div:last-of-type {
    border-bottom: none;
}

.planos .planos-valores .plano-100megasimples div:last-of-type i,
.planos .planos-valores .plano-200megasimples div:last-of-type i {
    color: #aaa;
}

.planos .planos-valores .plano-100megasimples div:last-of-type span,
.planos .planos-valores .plano-200megasimples div:last-of-type span {
    color: #aaa;
}

.planos .planos-valores .plano-100megasimples h2,
.planos .planos-valores .plano-200megasimples h2,
.planos .planos-valores .plano-300megasimples h2 {
    font-size: 32px;
    margin-bottom: 0;
    margin-top: 0;
    color: #3496bb;
}

.planos .planos-valores .plano-100megasimples h3,
.planos .planos-valores .plano-200megasimples h3,
.planos .planos-valores .plano-300megasimples h3 {
    font-size: 25px;
    font-weight: 600;
    margin: 10px 0px;
    text-align: center;
    line-height: 30px;
}

.planos .planos-valores .plano-100megasimples div i,
.planos .planos-valores .plano-200megasimples div i,
.planos .planos-valores .plano-300megasimples div i {
    font-size: 18px;
    color: #3496bb;
}

.planos .planos-valores .plano-100megasimples div span,
.planos .planos-valores .plano-200megasimples div span,
.planos .planos-valores .plano-300megasimples div span {
    margin-left: 10px;
    font-size: 16px;
}

.planos .planos-valores .plano-100megasimples a,
.planos .planos-valores .plano-200megasimples a,
.planos .planos-valores .plano-300megasimples a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    background: linear-gradient(to right, #2dc3e7, #65a4cf, #3496bb);
    padding: 5px 20px;
    margin-top: 20px;
    border-radius: 20px;
}

.planos .planos-valores .plano-100megasimplessimples a:hover,
.planos .planos-valores .plano-200megasimples a:hover,
.planos .planos-valores .plano-300megasimples a:hover {
    box-shadow: 0px 1px 10px #000;
}

/*Medias outras telas*/


@media (min-width: 1300px) {
    .fale-conosco .container {
        flex-direction: column;
        align-items: center;
    }

    .fale-conosco .fale-conosco--form {
        margin-top: 0px;
        margin-bottom: 0px;
        max-width: 600px;
    }

    .fale-conosco .fale-conosco--form h2,
    .fale-conosco .fale-conosco--form span {
        text-align: center;
    }

    .fale-conosco .fale-conosco--mapa {
        width: 800px;
        height: 500px;
    }

}

@media (min-width: 950px) {
    header .heading {
        justify-content: space-between;
        margin: 0px 30px;
    }

    header .heading nav {
        display: none;
    }

    header .heading a {
        margin-right: 80px;
    }

    header .heading .logo-mobile {
        display: flex;
        position: absolute;
        right: 0;
        margin-right: 20px;
    }

    .sobre-nos .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sobre-nos .sobre-nos--img {
        margin-top: 0;
        margin-bottom: 0;
    }

    .sobre-nos .sobre-nos--text {
        text-align: center;
        margin-bottom: 0;
    }

    .fale-conosco .container {
        flex-direction: column;
        align-items: center;
    }

    .fale-conosco .fale-conosco--form {
        margin-top: 0px;
        margin-bottom: 0px;
        max-width: 600px;
    }

    .fale-conosco .fale-conosco--form h2,
    .fale-conosco .fale-conosco--form span {
        text-align: center;
    }

    .fale-conosco .fale-conosco--mapa {
        width: 800px;
        height: 500px;
    }

}

@media (max-width: 950px) {
    header .heading {
        justify-content: space-between;
        margin: 0px 30px;
    }

    header .heading nav {
        display: none;
    }


    header .heading a {
        margin-right: 80px;
    }

    header .heading .logo-mobile {
        display: flex;
        position: absolute;
        right: 0;
        margin-right: 20px;
    }

    .planos .planos-valores {
        flex-direction: column;
        align-items: center;
    }

    .planos .planos-valores .plano-300megasimples {
        max-width: 500px;
        width: 80vw;
    }

    .planos .planos-valores .plano-300megasimples {
        max-width: 500px;
        width: 80vw;
    }

    .sobre-nos .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sobre-nos .sobre-nos--img {
        margin-top: 0;
        margin-bottom: 0;
    }

    .sobre-nos .sobre-nos--text {
        text-align: center;
        margin-bottom: 0;
    }

    .fale-conosco .container {
        flex-direction: column;
        align-items: center;
    }

    .fale-conosco .fale-conosco--form {
        margin-top: 0px;
        margin-bottom: 0px;
        max-width: 600px;
    }

    .fale-conosco .fale-conosco--form h2,
    .fale-conosco .fale-conosco--form span {
        text-align: center;
    }

    .fale-conosco .fale-conosco--mapa {
        width: 600px;
        height: 400px;
        padding-left: 0px;
    }

}


@media (min-width: 400px) and (max-width: 650px) {
    header .heading {
        justify-content: space-between;
        margin: 0px 30px;
    }

    

    .planos .beneficios {
        align-items: center;
        font-size: 10px;
        zoom: 50%;

    }

    .planos .beneficios div {
        padding-left: 35px;
    }


    .planos .beneficios .bordas-laterais {
        border-left: none;
        border-right: none;
        padding-left: 30px;
    }

    header .heading nav {
        display: none;
    }

    header .heading a {
        display: none;
    }

    header .heading .logo-mobile {
        display: flex;
        position: absolute;
        right: 0;
        margin-right: 20px;
    }

    .banner .banner-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .banner .banner-img {
        display: none;
    }

    .banner .banner-content h1 {
        font-size: 40px;
        text-align: center;
    }

    .banner .banner-content div {
        font-size: 18px;
        text-align: center;
    }

    .banner .banner-content a {
        font-size: 20px;
        margin-top: 85px;
    }

    .planos .planos-valores {
        flex-direction: column;
        align-items: center;
    }

    .planos .planos-valores .plano-300megasimples {
        max-width: 500px;
        width: 80vw;
    }

    .mais-planos h2 {
        font-size: 26px;
        text-align: center;
    }

    .sobre-nos .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sobre-nos .sobre-nos--img {
        margin-top: 0;
        margin-bottom: 0;
        max-width: 300px;
    }

    .sobre-nos .sobre-nos--text {
        text-align: center;
        margin-bottom: 0;
    }

    .fale-conosco .container {
        flex-direction: column;
        align-items: center;
    }

    .fale-conosco .fale-conosco--form {
        margin-top: 0px;
        margin-bottom: 0px;
        max-width: 300px;
    }

    .fale-conosco .fale-conosco--form h2,
    .fale-conosco .fale-conosco--form span {
        text-align: center;
    }

    .fale-conosco .fale-conosco--form button {
        margin: 20px 50px;
    }

    .fale-conosco .fale-conosco--mapa {
        width: 300px;
        height: 280px;
    }

    .fale-conosco .fale-conosco--mapa div {
        text-align: center;
    }

}

@media (max-width: 399px) {
    header .heading {
        justify-content: space-between;
        margin: 0px 30px;
    }

    .planos .beneficios {
        align-items: center;
        max-width: 150px;
        font-size: 10px;
        zoom: 40%;

    }

    .planos .beneficios div {
        padding-left: 35px;
    }


    .planos .beneficios .bordas-laterais {
        border-left: none;
        border-right: none;
        padding-left: 30px;
    }

    header .heading nav {
        display: none;
    }

    header .heading a {
        display: none;
    }

    header .heading .logo-mobile {
        display: flex;
        position: absolute;
        right: 0;
        margin-right: 20px;
    }

    .banner .banner-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 91px 20px;
    }

    .banner .banner-img {
        display: none;
    }

    .banner .banner-content h1 {
        font-size: 35px;
        text-align: center;
    }

    .banner .banner-content div {
        font-size: 18px;
        text-align: center;
    }

    .banner .banner-content a {
        font-size: 20px;
        margin-top: 85px;
    }


    .planos .planos-valores {
        flex-direction: column;
        align-items: center;
    }

    .planos .planos-valores .plano-300megasimples {
        max-width: 500px;
        width: 80vw;
    }

    .mais-planos h2 {
        font-size: 26px;
        text-align: center;
    }

    .sobre-nos .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sobre-nos .sobre-nos--img {
        margin-top: 0;
        margin-bottom: 0;
        max-width: 250px;
    }

    .sobre-nos .sobre-nos--text {
        text-align: center;
        margin: 25px;
    }

    .sobre-nos .sobre-nos--text h2 {
        font-size: 27px;
    }

    .fale-conosco .container {
        flex-direction: column;
        align-items: center;
    }

    .fale-conosco .fale-conosco--form {
        margin-top: 0px;
        margin-bottom: 0px;
        max-width: 300px;
    }

    .fale-conosco .fale-conosco--form h2,
    .fale-conosco .fale-conosco--form span {
        text-align: center;
    }

    .fale-conosco .fale-conosco--form button {
        margin: 20px 50px;
    }

    .fale-conosco .fale-conosco--mapa {
        width: 270px;
        height: 250px;
        padding-left: 0;
    }

    .fale-conosco .fale-conosco--mapa div {
        text-align: center;
    }

}

/*MENU DROPDOWN PRINCIPAL*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');



[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.menu-icon:checked+label,
.menu-icon:not(:checked)+label {
    position: fixed;
    top: 63px;
    right: 75px;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 10;
}

.menu-icon:checked+label:before,
.menu-icon:not(:checked)+label:before {
    position: absolute;
    content: '';
    display: block;
    width: 30px;
    height: 20px;
    top: 0;
    left: 0;
    border-top: 2px solid #ececee;
    border-bottom: 2px solid #ececee;
    transition: border-width 100ms 1500ms ease,
        top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
        height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
        background-color 200ms ease,
        transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked+label:after,
.menu-icon:not(:checked)+label:after {
    position: absolute;
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    /*  z-index: 20;*/
    top: 10px;
    right: 4px;
    background-color: #ececee;
    margin-top: -1px;
    transition: width 100ms 1750ms ease,
        right 100ms 1750ms ease,
        margin-top 100ms ease,
        transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked+label:before {
    top: 10px;
    transform: rotate(45deg);
    height: 2px;
    background-color: #ececee;
    border-width: 0;
    transition: border-width 100ms 340ms ease,
        top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
        height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
        background-color 200ms 500ms ease,
        transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked+label:after {
    width: 30px;
    margin-top: 0;
    right: 0;
    transform: rotate(-45deg);
    transition: width 100ms ease,
        right 100ms ease,
        margin-top 100ms 500ms ease,
        transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.nav {
    position: fixed;
    top: 33px;
    right: 50px;
    display: block;
    width: 80px;
    height: 80px;
    padding: 0;
    margin: 0;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.3);
    background-color: #3497bbef;
    animation: border-transform 7s linear infinite;
    transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
        right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 250ms 1100ms ease,
        width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
        height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes border-transform {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.menu-icon:checked~.nav {
    z-index: 3;
    animation-play-state: paused;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 200%;
    height: 200%;
    transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
        right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 250ms 700ms ease,
        width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
        height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}

.nav ul {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 3;
    text-align: center;
    transform: translateY(-50%);
    list-style: none;
}

.nav ul li {
    z-index: 3;
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    list-style: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: all 500ms linear;
}
.nav ul li:nth-child(1) {
    transition-delay: 50ms;
}

.nav ul li:nth-child(2) {
    transition-delay: 100ms;
}

.nav ul li:nth-child(3) {
    transition-delay: 200ms;
}

.nav ul li:nth-child(4) {
    transition-delay: 250ms;
}

.nav ul li:nth-child(5) {
    transition-delay: 300ms;
}

.nav ul li a {

    font-family: 'Montserrat', sans-serif;
    font-size: 9vh;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 800;
    display: inline-block;
    position: relative;
    color: #ececee;
    transition: all 250ms linear;
}

.nav ul li a:hover {
    text-decoration: none;
    color: #ffeba7;
}

.nav ul li a:after {
    z-index: 3;
    display: block;
    position: absolute;
    top: 50%;
    content: '';
    height: 2vh;
    margin-top: -1vh;
    width: 0;
    left: 0;
    background-color: #353746;
    opacity: 0.8;
    transition: width 250ms linear;
}

.nav ul li a:hover:after {
    width: 100%;
}

.menu-icon:checked~.nav ul li {
    z-index: 3;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 350ms ease,
        transform 250ms ease;
}

.menu-icon:checked~.nav ul li:nth-child(1) {
    transition-delay: 1400ms;
}

.menu-icon:checked~.nav ul li:nth-child(2) {
    transition-delay: 1480ms;
}

.menu-icon:checked~.nav ul li:nth-child(3) {
    transition-delay: 1560ms;
}

.menu-icon:checked~.nav ul li:nth-child(4) {
    transition-delay: 1640ms;
}

.menu-icon:checked~.nav ul li:nth-child(5) {
    transition-delay: 1720ms;
}

.nav ul li .logo-hwnet img {
    height: 170px;
    width: auto;
    display: block;
}

.logo-hwnet {
	position: absolute;
    top: 0%;
    left: 47%;
    display: block;
    z-index: 11;
    transition: all 250ms linear;
}
.logo-hwnet img {
	height: 170px;
	width: auto;
	display: block;
}


@media screen and (max-width: 991px) {

    .menu-icon:checked+label,
    .menu-icon:not(:checked)+label {
        right: 55px;
    }

    .nav {
        right: 30px;
    }

    h1 {
        font-size: 9vw;
        -webkit-text-stroke: 2px transparent;
       /* -webkit-text-fill-color: #ffeba7;
        color: #ffeba7;*/
    }

    .nav ul li a {
        font-size: 5vh;
        margin-bottom: 20px;
    }
}

/*WHATSAPP BUTÃOZIM*/

.btn-whatsapp a {
    color: #fff;
    text-decoration: none;
    display: block;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.btn-whatsapp {
    z-index: 3;
    position: fixed;
    right: 0px;
    bottom: 0px;
    transform: translate(-50%, -50%);
    background-color: #3496bb;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 58px;
    font-size: 1.8em;
    color: #ffffff;
    font-weight: 100;
    border-radius: 50%;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.btn-whatsapp:before,
.btn-whatsapp:after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #3496bb;
    left: -20px;
    right: -20px;
    bottom: -20px;
    top: -20px;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.pulsaDelay:after {
    animation-delay: .5s;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

@keyframes animate {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}


.plano-300megasimples {
    width: 100%;
}

.plano-300megasimples h2 {
    font-size: 18px;
}

.plano-300megasimples h3 {
    font-size: 16px;
}


/*FOOOTER Baozinho*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);

.footer-distributed {
    background: #666;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 55px 50px;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right {
    display: inline-block;
    vertical-align: top;
    
}

.footer-left h3:hover span {
    font-size: 2.4em; /* Aumenta o tamanho da fonte em 140% */
    transition: font-size 0.5s ease; /* Adiciona uma transição suave */
    position: relative;
}


.footer-left h3:hover span::before {
    content: "Conectando você ao Novo";
    font-size: 16%;
    position: absolute;
    top: 66%;
    left: -100%;
    white-space: nowrap;
    margin-left: 1px;
    overflow: hidden;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    animation: slideFromLeft 0.5s forwards;
}

@keyframes slideFromLeft {
    0% { left: -100%; }
    100% { left: 0%; }
}

/* Footer left */

.footer-distributed .footer-left {
    width: 40%;
}

/* The company logo */

.footer-distributed h3 {
    color: #ffffff;
    font: 'Open Sans' cursive;
    margin: 0;
    font-size: 5vh;

}

a:hover {
    color: #3496bb;
    transition: all 0.3s ease;
    /* Adiciona uma transição suave */

}

.footer-distributed h3 span {
    color: #3496bb;
    border-bottom: 2px solid #3496bb;
    /* Adiciona uma borda na cor azul */
    padding-bottom: 5px;
    /* Espaçamento inferior para separar a borda do texto */
    font-size: 1.1em;
    /* Tamanho da fonte um pouco maior */
    letter-spacing: 1px;
    /* Espaçamento entre as letras */
    font-weight: bold;
    /* Texto em negrito */
    text-transform: uppercase;
    /* Texto em maiúsculas */
    transition: all 0.3s ease;
    /* Adiciona uma transição suave */
}

.footer-distributed .footer-links {
    color: #ffffff;
    margin: 20px 0 12px;
    padding: 0;
    list-style: none;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.footer-distributed .footer-links li:hover a {
    color: #3496bb; /* Cor que deseja quando o mouse estiver sobre o link */
    /* Outras propriedades de estilo que você queira aplicar ao link quando o mouse estiver sobre ele */
}

.footer-distributed .footer-links a {
    display: inline-block;
    line-height: 1.8;
    font-weight: 400;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease; /* Adicionando uma transição suave para a mudança de cor */
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.footer-distributed .footer-company-name {
    color: #222;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}


/* Footer Center */

.footer-distributed .footer-center {
    width: 35%;
}

.footer-distributed .footer-center i {
    background-color: #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.footer-distributed .footer-center i.fa-envelope {
    font-size: 17px;
    line-height: 38px;
}

.footer-distributed .footer-center p {
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin: 0;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */

}

.footer-distributed .footer-center p span {
    font-weight: bold;
    font-size: 16px;
    line-height: 2;
    transition: all 0.3s ease;
    /* Adiciona uma transição suave */
    display: flex;
    /* Usa flexbox para alinhar os elementos */
    flex-direction: column;
    /* Define a direção como coluna */
    align-items: flex-start;
    /* Alinha os elementos à esquerda */

}

.footer-distributed .footer-center p span:hover {
    color: #3496bb;
    /* Altera a cor do texto quando o mouse passar por cima */
    transition: all 0.3s ease;
    /* Adiciona uma transição suave */

}




.footer-distributed .footer-center p a {
    color: #3496bb;
    text-decoration: none;
    transition: all 0.3s ease;
    /* Adiciona uma transição suave */
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.footer-distributed .footer-links a:before {
    content: "|";
    font-weight: 300;
    font-size: 20px;
    left: 0;
    color: #fff;
    display: inline-block;
    padding-right: 5px;

}

.footer-distributed .footer-links .link-1:before {
    content: none;
}

/* Footer Right */

.footer-distributed .footer-right {
    width: 20%;
}

.footer-distributed .footer-company-about {
    line-height: 20px;
    color: #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}

.footer-distributed .footer-company-about span {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

a {
    background-color: transparent;
    text-decoration: none;
    color: rgb(255, 255, 255);

}

.footer-distributed .footer-icons {
    margin-top: 25px;
}

.footer-distributed .footer-icons a {
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color: #33383b;
    border-radius: 2px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;
    margin-right: 3px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease; /* Adiciona transição de cor de fundo */
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}


.footer-distributed .footer-icons a:hover {
    background-color: #3496bb; /* Muda a cor de fundo ao passar o mouse */
}


@media (max-width: 880px) {

.footer-distributed {
    padding: 30px 20px;
    font-size: 14px;
    user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
}

.footer-distributed .footer-icons {
    margin-top: 15px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

.footer-distributed .footer-center i {
    margin: 10px;
}

.footer-distributed .footer-links {
    margin: 10px 0;
}

.footer-distributed .footer-company-about span {
    margin-top: -15px;
}

.plano-300megasimples {
    width: 100%;
}

.plano-300megasimples h2 {
    font-size: 18px;
}

.plano-300megasimples h3 {
    font-size: 16px;
}

}


/*SLIDER NOVO*/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

.hwnet-section {
    position: relative;
    width: 100%;
    display: block;
}
/*
.hwnet-full-height {
    min-height: 68vh;
}*/

.over-hide {
    overflow: hidden;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.hwnet-checkbox:checked+label,
.hwnet-checkbox:not(:checked)+label {
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
    margin-right: 6px;
    margin-left: 6px;
    display: none;
    /*EXIBIR = inline-block / OCULTAR = none*/
    width: 50px;
    height: 50px;
    border: 3px solid #bdc3c7;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    /*  background-image: url('https://assets.codepen.io/1462889/sl1.jpg');*/
    /*animation: border-transform 6s linear infinite alternate forwards;*/
    animation: none;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}

/*
.hwnet-checkbox.scnd+label {
    background-image: url('https://assets.codepen.io/1462889/sl2.jpg');
}

.hwnet-checkbox.thrd+label {
    background-image: url('https://assets.codepen.io/1462889/sl3.jpg');
}

.hwnet-checkbox.foth+label {
    background-image: url('https://assets.codepen.io/1462889/sl4.jpg');
}*/

.hwnet-checkbox:checked+label {
    box-shadow: 0 8px 25px 0 rgba(16, 39, 112, .3);
    transform: scale(1.3);
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;

    /* Adicione uma nova animação para fazer a transição entre os slides automaticamente */
    @keyframes change-slide {
        0% {
            opacity: 0;
        }

        20% {
            opacity: 1;
        }

        80% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

}

@keyframes border-transform {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.hwnet-slider-height-padding {
    padding-top: 90px;
}

ul.hwnet {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    /*    z-index: 20;*/
    padding: 0;
    margin: 0;
    list-style: none;
}

  
ul.hwnet li {
    position: absolute;
    bottom: -90px;
    left: 0;
    width: 100%;
    display: block;
    z-index: -1;
    padding: 0;
    margin: 0;
    list-style: none;
    height: 350px;
    border: 5px solid #bdc3c7;
    background-size: cover;
    background-position: center;
    background-image: url('../images/slides/1.jpg');
    border-radius: 50%;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 39.5;
    color: #f3f1f1;
    writing-mode: sideways-rl;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 25px 0 rgba(16, 39, 112, .1);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
    
    ul.hwnet li span {
        mix-blend-mode: difference;
    /*    z-index: -20;*/
    }
    
    ul.hwnet li:nth-child(2) {
        background-image: url('../images/slides/2.jpg');
    }
    
    ul.hwnet li:nth-child(3) {
        background-image: url('../images/slides/3.jpg');
    }
    
    ul.hwnet li:nth-child(4) {
        background-image: url('../images/slides/4.jpg');
    }
    
    ul.hwnet li:nth-child(5) {
        background-image: url('../images/slides/5.jpg');
    }
    
    ul.hwnet li:nth-child(6) {
        background-image: url('../images/slides/6.jpg');
    }
    ul.hwnet li:nth-child(7) {
        background-image: url('../images/slides/7.jpg');
    }
    
    ul.hwnet li:nth-child(8) {
        background-image: url('../images/slides/8.jpg');
    }
    
    ul.hwnet li:nth-child(9) {
        background-image: url('../images/slides/9.jpg');
    }
    
    ul.hwnet li:nth-child(10) {
        background-image: url('../images/slides/10.jpg');
    }
    
    
    @media (max-width: 767px) {
        .hwnet-slider-height-padding {
            padding-top: 90px;

        }
/*
        .hwnet-full-height {
            min-height: 80vh;
        }*/

            .frame {
           
                    top: 460px;
                    left: 50%;
                    width: 400px;
                    height: 400px;
                    /*margin-top: -200px;*/
                    margin-left: -200px;
                    border-radius: 2px;
                    /* box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.05); */
                    overflow: hidden;
                    /* background: #E9EDEF; */
                    color: #5E5E5E;
                    font-family: 'Open Sans', Helvetica, sans-serif;
                    -webkit-font-smoothing: antialiased;
                }
        
            }

            @media (max-width: 575px) {
                  /*      
                .hwnet-full-height {
                    min-height: 80vh;
                }*/
        
                    .frame {
                   
                            top: 460px;
                            left: 50%;
                            width: 400px;
                            height: 400px;
                            /*margin-top: -200px;*/
                            margin-left: -200px;
                            border-radius: 2px;
                            /* box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.05); */
                            overflow: hidden;
                            /* background: #E9EDEF; */
                            color: #5E5E5E;
                            font-family: 'Open Sans', Helvetica, sans-serif;
                            -webkit-font-smoothing: antialiased;
                        }
                
                    }

.frame {
    top: px;
    left: 50%;
    width: 400px;
    height: 400px;
    /* margin-top: -200px; */
    margin-left: -200px;
    border-radius: 2px;
    /* box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.05); */
    overflow: hidden;
    /* background: #E9EDEF; */
    color: #5E5E5E;
    font-family: 'Open Sans', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}
        .logo {
            transform: translate(-50%, 20%);
        }
    
        .logo img {
            width: 212px;
        }
    
        ul.hwnet li {
            height: 300px;
            font-size: 13px;
            letter-spacing: 1px;
        }
    

     
    @media (max-width: 575px) {
        .hwnet-slider-height-padding {
            padding-top: -60px;

    
        }
        .logo {
            transform: translate(-50%, 35%);
        }
    
        .logo img {
            width: 110px;
        }
    
        ul.hwnet li {
            height: 200px;
            line-height: 27.5;
        } 
      /*  
        .hwnet-full-height {
            min-height: 80vh;

    }   */
}


.hwnet-checkbox.frst:checked~ul li:nth-child(1) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.scnd:checked~ul li:nth-child(2) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.thrd:checked~ul li:nth-child(3) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.foth:checked~ul li:nth-child(4) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.fift:checked~ul li:nth-child(5) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.six:checked~ul li:nth-child(6) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.sev:checked~ul li:nth-child(7) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.hwnet-checkbox.eith:checked:checked~ul li:nth-child(8) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.nin:checked~ul li:nth-child(9) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.hwnet-checkbox.ten:checked~ul li:nth-child(10) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

    
/*BENEFICIOS HW*/
:root {
    --red: #3496bb;
    --cyan: #3496bb;
    --orange: #3496bb;
    --blue: #3496bb;
    --varyDarkBlue: hsl(234, 12%, 34%);
    --grayishBlue: hsl(229, 6%, 66%);
    --veryLightGray: hsl(0, 0%, 98%);
    --weight1: 200;
    --weight2: 400;
    --weight3: 600;
}

body {
            font-size: 15px;
            font-family: 'Poppins', sans-serif;
            background-color: var(--veryLightGray);
            margin: 0;
            padding: 0;
            user-select: none;
            /* Disable text selection for the entire body */
            -webkit-user-drag: none;
            /* Disable dragging for WebKit browsers */
        }

.attribution { 
    font-size: 11px; text-align: center; 
}
.attribution a { 
    color: hsl(228, 45%, 44%); 
}

h1:first-of-type {
    font-weight: var(--weight1);
    color: var(--varyDarkBlue);

}

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

h1:last-of-type {
    color: var(--varyDarkBlue);
}

@media (max-width: 400px) {
    h1 {
        font-size: 1.5rem;
    }
}

/* Header styles */
.header {
            text-align: center;
           /* margin-bottom: 50px;*/
        }

        .header h1:first-of-type {
            font-weight: var(--weight1);
            color: var(--varyDarkBlue);
        }

        .header h1:last-of-type {
            color: var(--varyDarkBlue);
        }

.header p {
    margin: 0 auto;
    line-height: 2;
    color: var(--grayishBlue);
}


.box p {
    color: var(--grayishBlue);
}

.box {
            border-radius: 5px;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin: 20px;
            transition: transform 0.3s ease;
        }

        .box:hover {
            transform: translateY(-5px);
        }

        .box h2 {
            color: var(--varyDarkBlue);
            font-weight: var(--weight3);
            margin-bottom: 10px;
        }

        .box p {
            color: var(--grayishBlue);
        }

        .box img {
            float: right;
            max-width: 50px;
            margin-left: 20px;
        }

img {
    float: right;
}

@media (max-width: 450px) {
    .box {
        height: 200px;
    }
}

@media (max-width: 950px) and (min-width: 450px) {
    .box {
        text-align: center;
        height: 180px;
    }
}

.cyan {
    border-top: 3px solid var(--cyan);
}
.red {
    border-top: 3px solid var(--red);
}
.blue {
    border-top: 3px solid var(--blue);
}
.orange {
    border-top: 3px solid var(--orange);
}

h2 {
    color: var(--varyDarkBlue);
    font-weight: var(--weight3);
}


@media (min-width: 950px) {
    .row1-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .row2-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-down {
        position: relative;
        top: 150px;
    }
    .box {
        width: 20%;
     
    }
    .header p {
        width: 30%;
    }
    
}


h3, p {
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 30px;

}
    

/*CAIXA DE PREÇOS DE PLANOS MIORZINHO*/

   .container.group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 22px; 
  }
   
  
   /* Ajustes para dispositivos com tela menor */
  @media screen and (max-width: 768px) {
    
    .grid-1-5 ul {
      display: none;
    }
  }
  
  
      .container {
        margin: 0 auto;
        /*width: 90%;*/
        max-width: 1200px;
        margin-bottom: 15px;
        
      }
      
      .group:after {
        content: "";
        display: table;
        clear: both;
      }
      
  /* Estilo dos containers de planos */
  .grid-1-5 {
    border: 2px solid #5d4e65;
    padding: 1.25em;
    position: relative;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adicionando transição suave */
    margin-bottom: 30px; /* Espaçamento entre os planos */
    flex: 0 1 calc(20% - 30px); /* Distribuição igual dos planos na tela */
    background-color: #fff; /* Fundo branco */
    border-radius: 15px; /* Bordas arredondadas */
  }
  
  /* Estilo dos títulos dos planos */
  .grid-1-5 h2 {
    font-size: 1.5em; /* Tamanho do título */
    font-weight: 700; /* Peso da fonte */
    margin-bottom: 15px; /* Espaçamento inferior */
    color: #333; /* Cor do texto */
  }
  
  /* Estilo dos subtítulos dos planos */
  .grid-1-5 h3 {
    font-size: 1.25em; /* Tamanho do subtítulo */
    margin-bottom: 15px; /* Espaçamento inferior */
    color: #666; /* Cor do texto */
  }
      
      @media screen and (min-width: 700px) {
        .grid-1-5 {
          float: left;
          width: 50%;
        }
        .grid-1-5:nth-child(odd) {
          clear: left;
        }
      }
      
      @media screen and (min-width: 800px) {
        .grid-1-5 {
          width: 33.3333333%;
        }
        .grid-1-5:nth-child(3n+1) {
          clear: left;
        }
        .grid-1-5:nth-child(odd) {
          clear: none;
        }
      }
      
      @media screen and (min-width: 1120px) {
        .grid-1-5 {
          width: 20%;
        }
  
      
        .grid-1-5:nth-child(odd),
        .grid-1-5:nth-child(3n+1) {
          clear: none;
        }
      }
      
      /* Estilo do hover */
  .grid-1-5:hover {
    background-color: #f7f7f7; /* Cor de fundo ao passar o mouse */
    border-color: #3496bb; /* Cor da borda ao passar o mouse */
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.5); /* Sombra ao passar o mouse */
    transform: translateY(-5px); /* Efeito de levantar ao passar o mouse */
  }
      
      /* Pseudo-elemento :before para criar a borda lateral esquerda */
  .grid-1-5:before,
  .grid-1-5:after {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: linear-gradient(top, #3496bb 0%, #3496bb 100%);
  }
      
      .grid-1-5:hover:before {
        left: -2px;
      }
      
      .grid-1-5:hover:after {
        right: -2px;
      }
      
     /* Efeito visual para o elemento .button dentro de .grid-1-5 ao passar o mouse */
  .grid-1-5:hover .button {
      background: linear-gradient(top, #3496bb 0%, #3496bb 100%);
  }
  
  /* Efeito de transição suave no botão ao passar o mouse */
  .grid-1-5 .button {
    transition: background-color 0.3s ease; /* Adicionando transição suave */
  }
  
  /* Efeito visual para o elemento .button dentro de .grid-1-5 ao passar o mouse */
  .grid-1-5:hover .button {
      background: linear-gradient(top, #3496bb 0%, #3496bb 100%);
  }
      
      h2, h3, p, ul {
        margin: 0;
      }
      
      h2 {
        font-size: 1em;
        font-weight: 400;
        margin: 0 0 0.5em;
      }
      
      h3 {
        font-size: 1.5em;
        letter-spacing: 0.0625em;
        margin: 0 0 0.3333333333333333em;
      }
      
      p {
        font-size: 0.875em;
      }
      
      p, ul {
        margin: 0 0 1.5em;
      }
      
      ul {
        color: #836565;
        font-size: 0.75em;
        list-style-type: none;
        padding: 0;
      }
      
      ul li {
        margin: 0 0 0.8333333333333333em;
      }
      
      .button {
        background-color: #9c83aa;
        border-radius: 20px;
        color: #fff;
        font-size: 1em;
        font-weight: 700;
        padding: 0.75em 1.5em;
        position: absolute;
        bottom: 1.25em;
        left: 50%;
        margin-left: -60px;
        text-decoration: none;
        width: 120px;
      }
      
      .uppercase, .button, h2 {
        text-transform: uppercase;
      }
      
      sup, .small {
        font-size: 0.6125em;
      }
  
      /* Estilo da lista de recursos do plano */
  .grid-1-5 ul {
    text-align: left;
    margin-bottom: 15px; /* Espaçamento inferior */
    color: #666; /* Cor do texto */
  }
  
  /* Estilo dos itens da lista de recursos */
  .grid-1-5 ul li {
    font-size: 0.875em; /* Tamanho do texto */
    margin-bottom: 0.5em; /* Espaçamento inferior */
  }
  
  /* Efeito hover nos itens da lista de recursos */
  .grid-1-5 ul li:hover {
    color: #333; /* Altera a cor do texto ao passar o mouse sobre o item */
  }
  
  /* Estilo do botão */
  .grid-1-5 .button {
    background-color: #9c83aa;
    border-radius: 20px;
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    padding: 0.75em 1.5em;
    text-decoration: none;
    width: 120px;
    margin-top: auto; /* Adiciona margem automática na parte superior */
    margin-bottom: -38px; /* Espaçamento na parte inferior */
  }
  
  
  /* Estilo do botão ao passar o mouse */
  .grid-1-5 .button:hover {
    background-color: #666; /* Cor de fundo mais escura */
  }
  
  /* Estilo dos detalhes do plano (botão) */
  .grid-1-5 .button-details {
    background-color: #3496bb; /* Cor de fundo do botão */
    color: #fff; /* Cor do texto do botão */
    border: none; /* Remover borda */
    border-radius: 20px; /* Bordas arredondadas */
    font-size: 1em; /* Tamanho da fonte */
    font-weight: 700; /* Peso da fonte */
    padding: 0.75em 1.5em; /* Espaçamento interno */
    text-decoration: none; /* Remover sublinhado */
    width: 120px; /* Largura do botão */
    display: inline-block; /* Exibir como bloco */
    transition: background-color 0.3s ease; /* Transição suave */
  }
  
     /* Estilo do botão ao passar o mouse */
  .grid-1-5 .button-details:hover {
    background-color: #26718c; /* Cor de fundo mais escura ao passar o mouse */
  }