@font-face {
    font-family: 'Aldo the Apache';
    src: url('../fonts/AldotheApache.woff2') format('woff2'),
         url('../fonts/AldoTheApache.woff') format('woff'),
         url('../fonts/AldoTheApache.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html, body {
    display: block;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: black;
    overflow-x: hidden; /* Evita o scroll horizontal */
    overflow-y: auto;   /* Permite o scroll vertical */
    max-height: 100vh; /* Limita a altura do corpo à altura da janela */
    max-width: 100vw;
}

/* Customizar a barra de rolagem para navegadores WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 12px; /* Largura da barra de rolagem */
}

::-webkit-scrollbar-track {
    background: #000; /* Cor de fundo da trilha da barra de rolagem */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 156, 255, 0.8); /* Cor do "polegar" da barra de rolagem */
    border-radius: 6px; /* Arredondamento das bordas */
    border: 3px solid #000; /* Borda ao redor do "polegar" */
    cursor: pointer; /* Garante que o cursor indique que é interativo */
}

body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    position: relative;
    z-index: 2;
    color: white;
    padding: 0;
}

.dot0 {
    width: 2rem !important;
    height: 2rem !important;
    background-image: url('../imgs/roadmap/Castor_D.png'); /* Caminho para a imagem */
    background-size: cover; /* Ajusta a imagem para cobrir a área */
    position: absolute;
    animation: move 2s infinite; /* Animação de movimento */
}

.dot1 {
    width: 3rem !important;
    height: 3rem !important;
    background-image: url('../imgs/roadmap/Castor_D_Amarelo.png'); /* Caminho para a imagem */
    background-size: cover; /* Ajusta a imagem para cobrir a área */
    position: absolute;
    animation: move 2s infinite; /* Animação de movimento */
}

.dot2 {
    width: 3rem !important;
    height: 3rem !important;
    background-image: url('../imgs/roadmap/Castor_D_Branco.png'); /* Caminho para a imagem */
    background-size: cover; /* Ajusta a imagem para cobrir a área */
    position: absolute;
    animation: move 2s infinite; /* Animação de movimento */
}

@keyframes move {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% - 10px); /* Reduz a largura para não cobrir o scrollbar */
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

header {
    font-family: 'Aldo the Apache', sans-serif;
    background-color: rgb(18, 18, 18);
    height: 4rem;
    font-size: 0.9rem; /* Tamanho da fonte padrão para dispositivos móveis */
    color: rgb(97, 223, 255);
}

footer {
    font-family: 'Aldo the Apache', sans-serif;
    background-color: rgb(18, 18, 18);
    height: 4rem;
    font-size: 0.9rem; /* Tamanho da fonte padrão para dispositivos móveis */
    color: rgb(97, 223, 255);
}

/* Media query para tablets e desktops */
@media (min-width: 768px) {
    header, footer {
        font-size: 1.3rem; /* Tamanho da fonte para tablets e desktops */
    }
}

header nav a, footer nav a {
    color: rgb(97 223 255);
}

header nav a:hover, footer nav a:hover {
    color: #e0e0e0;
}

.primary-section {
    color: rgb(97 223 255);
}

.secondary-section {
    color: rgb(18, 18, 18);
}

.btn-primary {
    border-color: rgb(97 223 255);
    color: rgb(18, 18, 18);
}

.btn-primary:hover {
    border-color: rgb(18, 18, 18);
    color: rgb(97 223 255);
}

.lead {
    font-size: 1.25rem;
}

.rounded-circle {
    border: 2px solid rgb(18, 18, 18);
}

.contract {
    color: rgb(97 223 255);
}

/* Estilos para Desktop */
@media (min-width: 768px) {
    .grafico {
        width: 1000px;
        height: 500px;
        border: none; 
    }
    h1 {
        font-family: 'Aldo the Apache', sans-serif;
        font-size: 4.5rem;
        color: #fff;
        text-transform: uppercase;
    }

    h2 {
        font-family: 'Aldo the Apache', sans-serif;
        font-size: 3.8rem;
        color: #fff;
        text-transform: uppercase;
    }

    h3 {
        font-family: 'Aldo the Apache', sans-serif;
        font-size: 3rem;
        color: #fff;
        text-transform: uppercase;
    }

    p {
        font-family: 'Montserrat', sans-serif;
        font-size: 2rem;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .img-linea {
        background-color: rgba(0, 0, 0, 0.8);
        width: 70% !important;
    }

    .beavernomics{
        font-size: 7rem;
    }

    .icon-copy {
        width: 35px;      /* Ajuste o tamanho do ícone */
        height: 35px;     /* Proporção consistente */
    }

    .contract {
        font-size: 3rem;
        /* margin-top: -5rem; */
    }
}

/* Estilos para Mobile */
@media (max-width: 767px) {
    .grafico {
        height: 400px;
        width: 100%;
        border: none; 
    }

    header.content {
        position: sticky; /* Fixa o elemento dentro do contêiner */
        top: 0;           /* Posição no topo */
        z-index: 1000;    /* Prioridade sobre outros elementos */
    }

    h1 {
        font-family: 'Aldo the Apache', sans-serif;
        font-size: 3rem; /* Reduzido */
        color: #fff;
        text-transform: uppercase;
    }

    h2 {
        font-family: 'Aldo the Apache', sans-serif;
        font-size: 2rem; /* Reduzido */
        color: #fff;
        text-transform: uppercase;
    }

    h3 {
        font-family: 'Aldo the Apache', sans-serif;
        font-size: 2rem; /* Reduzido */
        color: #fff;
        text-transform: uppercase;
    }

    p {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.2rem; /* Reduzido */
        color: #fff;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .img-linea {
        background-color: rgba(0, 0, 0, 0.8);
        width: 65% !important;
    }

    .contract {
        font-size: 130%;
        /* margin-top: -5rem; */
    }

    .beavernomics{
        font-size: 3rem;
    }

    .img-divider {
        transform: rotate(90deg);
        width: 25% !important;
    }

    .icon-copy {
        width: 1.5rem;      /* Ajuste o tamanho do ícone */
        height: 1.5rem;     /* Proporção consistente */
    }
}

strong {
    font-family: 'Aldo the Apache', sans-serif;
    font-size: 1.2rem;
    color: rgb(97 223 255);
}

a {
    color: rgb(97 223 255) !important;
}

.btn {
    font-size: 1.5rem;
}

.partner-img {
    width: 20% !important;
    height: auto;
    border-radius: 10px;
    margin: 10px;
}

.container {
    max-width: 1280px;
}

.header-logo {
    max-height: 50px;
    margin-right: 5px;
}

.footer-logo {
    max-height: 50px;
    margin-left: 5px;
}

.img-icon {
    max-height: 30px;
}

.img-icon-header {
    width: 3rem;
    height: auto;
}

.btn-mint {
    padding: 1rem;
    padding-left: 4rem;
    padding-right: 4rem;
    margin: 2rem;
    color: white;
    background-color: rgba(0, 156, 255, 0.9);
    border: 2px solid rgba(0, 156, 255, 0.8);
    margin-top: 10px;
}

.partner-img-container {
    background-color: rgb(18, 18, 18, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 75%;
    height: 0;
    padding-bottom: 75%;
    position: relative;
}

.partner-img {
    width: 80% !important;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.partner-carousel-img-container {
    background-color: rgb(18, 18, 18, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 75%;
    height: 0;
    padding-bottom: 75%;
    margin: 0 auto; /* Centraliza horizontalmente no carrossel */
    position: relative;
}

.partner-carousel-img {
    width: 80%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer-logo {
    max-height: 40px; /* Ajuste conforme necessário */
}

.img-icon {
    max-height: 24px; /* Ajuste conforme necessário */
}

.build-on-linea {
    font-size: 1.2rem; /* Ajuste conforme necessário */
    color: #ffffff; /* Altere a cor conforme necessário */
    display: flex;
    align-items: center;
}

.linea-logo {
    max-height: 24px; /* Ajuste conforme necessário */
    margin-left: 0.5rem;
}

@media (max-width: 768px) {
    .build-on-linea {
        font-size: 1rem; /* Ajuste conforme necessário para telas menores */
    }
}

.card {
    border: 0.3rem solid rgba(0, 156, 255, 0.8);
    border-radius: 2rem;
    background: transparent;
}

.card-body {
    background-color: rgb(18, 18, 18, 0.9);
    padding: 0;
}

.card-header {
    background-color: rgb(18, 18, 18, 0.9);
    padding: 0;
}

.card-header-text {
    background-color: rgb(18, 18, 18, 0.9);
}

.card-text {
    background-color: rgba(0, 156, 255, 0.8)
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* Espaçamento entre os ícones */
}

.icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-icon {
    width: 24px;  /* Ajuste o tamanho conforme necessário */
    height: 24px; /* Ajuste o tamanho conforme necessário */
    fill: #c0c0c0; 
    margin-left: 4px; /* Define a cor dos ícones SVG */
}

/* Estilos para o botão hamburger */
.hamburger {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    color: rgb(97, 223, 255);
    cursor: pointer; /* Certifique-se de que o cursor mude para pointer */
}

/* Estilos para o menu de navegação */
#navMenu {
    display: flex;
    flex-direction: row;
}

/* Media query para telas pequenas */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    #navMenu {
        display: none;
        position: absolute;
        margin-left: 0 !important;
        top: 4rem; /* Posiciona abaixo do header */
        left: 0;
        right: 0;
        background-color: rgb(18, 18, 18, 0.98); /* Mesma cor do header */
        flex-direction: column;
        padding: 1rem;
        z-index: 1000; /* Garante que o menu fique acima de outros elementos */
        font-size: 1.5rem;
    }

    #navMenu.show {
        display: flex;
    }

    /* Estilos para os links de navegação */
    #navMenu .nav-link {
        padding: -1rem;
        display: block;
        transition: background-color 0.3s ease;
    }

    /* Estilos de hover com fundo diferente */
    #navMenu .nav-link:hover {
        background-color: rgba(0, 156, 255, 0.8);
    }
}
/* Estilos para a imagem da próxima seção */
.next-section-img {
    width: 100%;
    height: auto;
    z-index: 1; /* Garante que a imagem fique abaixo do menu */
    position: relative;
}

.img-resize {
    width: 65%; /* Ajuste esse valor para o tamanho desejado */
    height: auto;
}

.img-resize-md {
    width: 50%; /* Ajuste esse valor para o tamanho desejado */
    height: auto;
}

.contract:hover {
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fbdfb5;  /* Cor do texto ao passar o mouse */
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
    display: flex;
    align-items: center;
    margin-top: -1rem;
}

.contract {
    word-break: break-word; /* Evita quebra inesperada */
    display: inline-block; /* Garante alinhamento correto */
}

/* Efeito de hover no botão de copiar */
.copy-btn:hover .icon-copy {
    animation: pulse 1s infinite; /* Animação de "pulse" no ícone */
}

/* Animação de "pulse" para o ícone de copiar */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Define o estilo base */
.img-hover {
    width: 50%; /* Tamanho inicial */
    transition: transform 0.3s ease, filter 0.3s ease; /* Animações suaves */
}

/* Define o efeito ao passar o mouse */
.img-hover:hover {
    transform: scale(1.1); /* Aumenta 10% do tamanho */
    filter: brightness(1.2); /* Aumenta o brilho */
}