body {
    background: #000;
    padding: 20px; /* Espaçamento interno para não colidir com a borda */
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Sombra para um efeito de profundidade */
    background-position: 0 0, 15px 15px; /* Posição do padrão de corda */
    font-family: "Raleway", sans-serif;
}

.navbar-toggler {
	background-color: #fff;
}

#offcanvasNavbar {
	background-color: #005F72;
}

.slider-thumb{
    position: absolute;
	content: "";
	left: 0%;
	top: 110%;
	width: 450px;
	height: 500px;
	background: linear-gradient(90deg,#ff8a00,#8f0707);
	border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
	will-change: border-radius, transform, opacity;
	animation: sliderShape 5s linear infinite;
	display: block;
	z-index: -1;
	-webkit-animation: sliderShape 5s linear infinite;
}


.main::before {
	position: absolute;
	content: "";
	left: 75%;
	top: 20%;
	width: 450px;
	height: 500px;
	background: linear-gradient(90deg,#e52e71,#ff8a00);
	border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
	will-change: border-radius, transform, opacity;
	animation: sliderShape 5s linear infinite;
	display: block;
	z-index: -1;
	-webkit-animation: sliderShape 5s linear infinite;
}
  @keyframes sliderShape{
    0%,100%{
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
      transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    34%{
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
      transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    }
    50%{
      transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    67%{
      border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
      transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    }
  }

.float-start.item-image {
    margin: 0 1rem 1rem 0;
}

.float-end.item-image {
    margin: 0 0 1rem 1rem;
}

.nav-link {
    cursor: pointer;
}
/* Mudar a cor dos links do menu para branco */
.navbar-nav .nav-link {
    color: white !important; /* Cor do texto dos links */
}

/* Mudar a cor dos links do menu ao passar o mouse */
.navbar-nav .nav-link:hover {
    color: #ccc !important; /* Cor do texto ao passar o mouse */
}

/* Garantir que o texto dos itens do menu seja legível */
.navbar-brand {
    color: white !important; /* Cor do texto do logotipo (se houver) */
}

.navbar-brand:hover {
    color: #ccc !important; /* Cor do logotipo ao passar o mouse */
}

/* Style the back-to-top button */
.back-to-top-link {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    line-height: 50px;
}
.back-to-top-link i {
	line-height: 50px;
	display: inline-flex;
	height: 100%;
	width: 100%;
	justify-content: center;
	align-items: center;
}

/* Show the button when the user scrolls down 300px */
@media (min-width: 768px) {
    .back-to-top-link.show {
        display: block;
    }
}

/* Change button background color on hover */
.back-to-top-link:hover {
    background-color: #FFC107;
}

/* Button animation on hover */
.back-to-top-link:hover {
    transform: scale(1.1);
}

/**/
.text-container {
    height: 50vh; /* Ajusta a altura para 50% da altura da tela */
    display: flex; /* Flexbox para centralização */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

.text-container h1 {
    margin: 0;
    font-size: 150px; /* Tamanho da fonte */
    background-repeat: no-repeat; /* Sem repetição da imagem */
    background-size: cover; /* Cobre todo o texto */
    background:linear-gradient(90deg,#ff8a00,#8f0707);
    -webkit-background-clip: text; /* Clip de fundo para o texto */
    color: transparent; /* Texto transparente */
    animation: animate 15s ease-in-out infinite; /* Animação opcional */
    text-align: center; /* Alinhamento centralizado */
    text-transform: uppercase; /* Texto em maiúsculas */
    font-weight: 900; /* Peso da fonte */
}

@keyframes animate {
    0%, 100% {
        background-position: left top; /* Posição inicial e final */
    }
    25% {
        background-position: right bottom; /* Posição no 25% da animação */
    }
    50% {
        background-position: left bottom; /* Posição no meio da animação */
    }
    75% {
        background-position: right top; /* Posição no 75% da animação */
    }
}