@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,88.3,200;1,88.3,200&display=swap');

html, body{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 80;
}
.container {
  max-width: 960px;
}

/*
 * Custom translucent site header
 */

.site-header {
  visibility: hidden;
  background-color: rgba(37, 37, 37, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

.welcome{
  background: url(imgs/bg.jpg) fixed no-repeat;
  background-position: left;
  background-size: contain;
}
/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.logo {
  position: absolute;
  top: -5%;
  bottom: 0;
  left: 0%;
  width: 350px;
  height: 100%;
}
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */

/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
  .imgLogo{
    width: 150px;
  }
}

@media (min-width: 768px) {

  .imgLogo{
    width: 250px;
    height: auto;
  }
}

.floating-buttons {
            position: fixed; /* Fixa os botões na tela */
            bottom: 20px; /* Distância do fundo da tela */
            right: 20px; /* Distância da direita da tela */
            z-index: 1000; /* Garante que os botões fiquem acima de outros elementos */
            display: flex;
            flex-direction: column; /* Organiza os botões em coluna */
            gap: 15px; /* Espaço entre os botões */
        }

        .floating-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px; /* Largura do botão */
            height: 60px; /* Altura do botão */
            border-radius: 50%; /* Transforma o botão em um círculo */
            color: white; /* Cor do ícone */
            font-size: 28px; /* Tamanho do ícone */
            text-decoration: none; /* Remove sublinhado do link */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidade */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave ao passar o mouse */
        }

        .floating-button:hover {
            transform: translateY(-5px); /* Efeito de "subir" ao passar o mouse */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra mais intensa ao passar o mouse */
        }

        /* Cores específicas para cada mídia social */
        .floating-button.whatsapp {
            background-color: #25D366; /* Verde do WhatsApp */
        }

        .floating-button.instagram {
            background-color: #E4405F; /* Rosa/Roxo do Instagram */
            /* Ou um gradiente para o Instagram: */
            /* background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); */
        }

        /* Animação de entrada dos botões (opcional) */
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .floating-button {
            animation: fadeInRight 0.5s ease forwards;
        }
        .floating-button:nth-child(1) { animation-delay: 0.1s; }
        .floating-button:nth-child(2) { animation-delay: 0.2s; }
        /* Adicione mais se tiver mais botões */