h2 {
    font-size: var(--text-size-xl);
    font-weight: 600;
}

h3 {
    font-size: var(--text-size-lg);
}

p {
    font-size: var(--text-size-md);
}

li {
    font-size: var(--text-size-md);
    font-weight: 300;
}

.banner {
    position: relative;
    background-color: var(--dark-gray);
    color: var(--light);
    height: 46rem;
    overflow: hidden;
}

.banner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: url('/media/engineering/bannerEngineering.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.banner .text {
    padding-top: 8rem; 
    max-width: 30rem;
}

@media (max-width: 992px) {
    .banner {
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .banner .container-fluid {
        height: auto;
        display: block;
        padding: 3rem 1.5rem;
    }

    .banner .text {
        padding-top: 0;
        text-align: center;
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .banner::after {
        position: relative;
        width: 100%;
        height: 40rem;
        top: auto;
        right: auto;
        bottom: 0;
        order: 2;
        margin-top: 1rem;
    }
}

.support-content {
    background-color: var(--dark);
    color: var(--light);
    margin-top: -13rem;
    border-radius: var(--border-radius);
    padding: 3rem 4rem;
    display: flex;
    align-items: flex-start;
    gap: 5rem;
    position: relative;
}

.support.text-left {
    width: 35rem;
}

.support.text-right {
    width: 37rem;
}

.support li {
    font-size: var(--text-size-md);
}

@media (max-width: 992px) {
    .support .support-content {
        flex-direction: column;
        gap: 1rem;
    }

    .support .text-left,
    .support .text-right {
        width: 100%;
        margin: 0;
    }
}

.content {
    width: 49%;
}

.content .text {
    margin-bottom: 7rem;
}

.content h3 {
    font-weight: 400;
}

.content p {
    font-weight: 300;
    font-size: var(--text-size-md);
}

.content a {
    text-decoration: none;
    font-size: var(--text-size-md);
    font-weight: 600;
}

.title-green {
    color: var(--accent);
}

.support p {
    font-size: var(--text-size-md);
}

.content-divider {
    border-bottom: 0.15rem solid #dcdcdc;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}

.consultancy {
    padding-top: 5rem;
}

.consultancy h3 {
    font-weight: 400;
}

.consultancy p {
    font-size: var(--text-size-md);
}

.consultancy li {
    font-size: var(--text-size-md);
}

.consultancy-wrapper {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.consultancy-menu {
    flex: 0 0 280px;
    position: sticky;
    top: 2rem;
}

.consultancy-content {
    flex: 1;
    min-width: 0;
}

.list-group-item-custom {
    display: block;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    color: var(--light-gray);
    background-color: #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.list-group-item-custom:last-child {
    border-bottom: none;
}

.list-group-item-custom.active {
    color: var(--dark);
    border-left: 0.4rem solid;
    border-image: linear-gradient(180deg, var(--primary), var(--accent)) 1;
    padding-left: calc(1.5rem - 4px);
}

.scrollspy-example {
    position: relative;
}

@media (max-width: 992px) {
    .consultancy-wrapper {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }

    .consultancy {
        padding-top: 2rem;
    }

    .consultancy-menu {
        flex: 0 0 auto;
        position: static;
        width: 100%;
        max-width: 100%;
    }

    .consultancy-content {
        flex: 1;
        width: 100%;
    }

    .list-group-custom {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.5rem;
        border: none;
        padding: 0 10px;
        
        scroll-snap-type: x mandatory;
        
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }

    .list-group-custom::-webkit-scrollbar {
        display: none;
    }

    .list-group-item-custom {
        flex: 0 0 auto;
        display: inline-flex;
        padding: 0.75rem 1.25rem;
        border-bottom: none;
        border-radius: 2rem;
        white-space: nowrap;
        text-align: center;
        
        scroll-snap-align: start; 
    }

    .list-group-item-custom.active {
        padding: 0.75rem 1.25rem;
        border-left: 0.4rem solid;
        border-image: linear-gradient(180deg, var(--primary), var(--accent)) 1;
        color: var(--dark);
    }
}

.site-content {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.site-content .text {
    width: 24rem;
}

.site-content .image img,
.site-content .notebook {
    width: 100%;
    max-width: 25rem;
}

.site-content .notebook {
    width: 25rem;
}

@media (max-width: 992px) {

    .site-content {
        flex-direction: column;
        gap: 1rem;
    }

    .site-content .text,
    .site-content .image {
        width: 100%;
    }

}

.plus-links p {
    font-weight: 500;
}

.plus-links .border-text {
    border-bottom: 0.1rem solid var(--primary);
}

.plus-links .material-symbols-rounded {
    font-weight: 600;
}

.btn-light-add .icon-open,
.btn-light-add .icon-closed {
    display: none;
}

.btn-light-add.collapsed .icon-closed {
    display: inline-block;
}

.btn-light-add:not(.collapsed) .icon-open {
    display: inline-block;
}

.anatel-content {
    display: flex;
    align-items: flex-start;
    gap: 6rem;
}

.anatel-content .text {
    width: 31rem;
}

.anatel-content .image img,
.anatel-content .anatelLogo {
    width: 100%;
    max-width: 12rem;
}

@media (max-width: 992px) {

    .anatel-content {
        flex-direction: column;
        gap: 1rem;
    }

    .anatel-content .text,
    .anatel-content .image {
        width: 100%;
    }

    .anatel-content .image {
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

#pills-tab .nav-link {
    color: var(--dark);
    font-size: var(--text-size-lg);
    transition: all 0.3s ease;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

#pills-tab .nav-link:not(.active) {
    color: var(--light-gray);
}

#pills-tab .nav-link:hover {
    color: #000;
}

#pills-tab .nav-link.active {
    color: #000;
    border-bottom: 3px solid var(--primary);
    background: transparent;
}

@media (max-width: 992px) {
  #pills-tab {
    flex-wrap: nowrap !important; /* Impede que os itens quebrem linha */
    overflow-x: auto; /* Habilita o scroll horizontal */
    white-space: nowrap; /* Garante que o texto não quebre */
    scroll-behavior: smooth; /* Scroll suave */
    scroll-snap-type: x mandatory; /* Efeito de "imã" ao soltar o dedo */
    -webkit-overflow-scrolling: touch; /* Suavidade nativa no iOS */
    padding: 0 0.8rem; /* Espaço nas laterais para não cortar o primeiro/último botão */
    /* Esconder a barra de rolagem (Estética) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
  }

  /* Esconder scrollbar no Chrome/Safari */
  #pills-tab::-webkit-scrollbar {
    display: none;
  }

  #pills-tab .nav-item {
    flex-shrink: 0; /* Impede que o botão encolha para caber na tela */
    scroll-snap-align: start; /* Define onde o scroll para */
  }

  #pills-tab .nav-link {
    white-space: nowrap; /* Garante que o texto do botão fique em uma linha */
  }

  #pills-tab {
  /* ... código anterior ... */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
}

.next-step {
    background-color: #262527;
    color: var(--light);
    margin-top: 5rem;
    margin-bottom: 7rem;
    padding-bottom: 2rem;
    padding-top: 2rem;
    border-radius: var(--border-radius);
}

.next-step-content {
    display: flex;
    align-items: center;
    gap: 10rem;
}

.next-step-content .text {
    width: 45rem;
    margin-left: 3rem;
}


.next-step-content .next-step-img {
    width: 16rem;
}

.next-step-content .text .btn {
    width: auto;
    align-self: flex-start;
}

@media (max-width: 992px) {

    .next-step-content {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .next-step-content .text,
    .next-step-content .right {
        width: 100%;
        margin: 0rem;
    }

}

.btn-meeting {
    background-color: var(--accent);
    color: var(--dark);
    padding-left: 1.8rem;
    padding-right: 1.7rem;
    font-size: var(--text-size-md);
    border-radius: var(--border-radius);
}

.blog {
  background-color: #000000;
  color: var(--light);
  padding-bottom: 15rem;
  background-image: url('/media/engineering/fundoBlog.png');
  background-repeat: no-repeat;
  background-position: -20rem 14rem;
  background-size: auto;
}

.links p {
  font-size: var(--text-size-lg);
  font-weight: 300;
  width: 32rem;
}

.links a {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--light);
}

.blog .border-text {
  border-bottom: 0.01rem solid var(--light-gray);
  padding-bottom: 2rem;
}

@media (max-width: 992px) {
    .blog .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .blog .d-flex.justify-content-between.align-items-center p {
        width: 100%;
    }

    .blog .d-flex.justify-content-between.align-items-center small {
        margin-top: 1.5rem;
    }
}