/*
Atule Tecnology
#RusiaIsATerroristState
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
  }
  
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centraliza os itens verticalmente */
    background-color: #e7e7e7;
    height: 140px; /* Define a altura fixa da barra */
    padding: 0 20px; /* Espaçamento lateral */
    color: white;
  }
  
  .logo img {
    height: 100px; /* Mantém a altura da logo */
    width: auto; /* Proporção automática */
    display: block;
  }

  body .icones {
    width: 5vh;
  }

/* Botão de menu (hambúrguer) */
  .menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #e0519a; /*cor do menu hamburguer*/
    font-size: 24px;
    cursor: pointer;
  }

/* Estilos para o menu principal */
 .menu {
    display: flex;
    gap: 20px;
  }

  .menu ul {
    list-style: none;
    display: flex;
    gap: 20px;
  }
  
  .menu ul li a {
    text-decoration: none;
    color:  #e0519a; /*cor da fonte*/
    font-size: 16px;
    transition: color 0.3s;
  }
  
  .menu ul li a:hover {
    color: #00bcd4;
  }

  .container{
  flex-direction: row;
  width: 100%;
  margin: 0 auto;
  margin: 10px;
  margin-top: 20px;
  }

 /* Estilos para telas menores */
@media (max-width: 1024px) {
    .menu {
      display: none; /* Esconde o menu por padrão */
      flex-direction: column;
      background-color: #a1a1a1f8; /*cor do fundo menu flutuante*/
      position: absolute;
      top: 140px;
      right: 0;
      width: 100vw;
      z-index: 10;
    }
  
    .menu ul {
      flex-direction: column;
      gap: 10px;
    }
  
    .menu ul li a {
      padding: 10px;
      text-align: left;
    }
  
    .menu.show {
      display: flex; /* Mostra o menu quando ativado */
    }
  
    .menu-toggle {
      display: block; /* Mostra o botão hambúrguer */
    }

}
  /*Estilos das seções
 ---------------------------------------------------------------------------------------------
 Styles for the home-section
 ---------------------------------------------------------------------------------------------
  */
#home-section {
  /* IMPORTANTE: Substitua 'your-background-image.jpg' pelo caminho real da sua imagem. */
  /* Exemplo: se sua imagem estiver em 'assets/img/hero-background.jpg' */
  /* e o arquivo styles.css estiver em 'assets/css/', o caminho será '../img/hero-background.jpg' */
  background-image: url('../img/home/home.jpg');
  background-size: cover; /* Garante que a imagem cubra toda a área */
  background-position: center center; /* Centraliza a imagem */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  
  width: 100vw; /* Largura total da viewport (tela) */
  height: 80vh; /* Altura total da viewport (tela) */

  /* Usando Flexbox para centralizar o conteúdo */
  display: flex;
  flex-direction: column; /* Empilha os itens verticalmente */
  justify-content:flex-start; /* Centraliza verticalmente */
  align-items: center; /* Centraliza horizontalmente */
  text-align: left; /* Centraliza o texto dentro dos elementos filhos */

  color: #e0519a; /* Cor do texto (branco). Ajuste conforme sua imagem de fundo. */
  padding: 20px; /* Adiciona um espaçamento interno para o conteúdo não colar nas bordas */
}

/* Estilos opcionais para melhorar a legibilidade do texto sobre a imagem */
#home-section h1 {
  font-family: "Updock", cursive;
  font: size 10vh; /* Tamanho da fonte do título. Ajuste conforme necessário. */
  font-size: 10vw;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra escura para texto claro */
}

#home-section p {
  font-family: "Updock", cursive;
  font-size: 4rem; /* Tamanho da fonte do parágrafo. Ajuste conforme necessário. */
  margin-bottom: 3rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Sombra escura para texto claro */
}

/* Garante que o botão seja claramente visível */
#home-section .btn {
  /* --- Estilos para o botão retangular com preenchimento sólido --- */
  display: inline-block;    /* Garante que o elemento <a> se comporte como um bloco para padding, mas flua com o texto. */
  padding: 12px 24px;       /* Espaçamento interno do botão (vertical e horizontal). Ajuste conforme o seu gosto. */
  background-color: #e0519a; /* Cor de fundo sólida (ex: vermelho do tema). */
  color: white;               /* Cor do texto do botão (branco para contraste com o fundo vermelho). */
  border: 2px solid #e0519a;    /* Borda da mesma cor do fundo para um visual coeso ou 'border: none;' se preferir sem borda. */
  border-radius: 20px;           /*  arredondamento dos cantos, tornando o botão perfeitamente retangular ou arredondado. */
  text-align: center;         /* Centraliza o texto dentro do botão. */
  text-decoration: none;      /* Remove o sublinhado padrão de links. */
  font-weight: bold;          /* Deixa o texto em negrito para maior destaque. */
  font-size: 1.1em;           /* Tamanho da fonte ligeiramente aumentado. Ajuste se necessário. */
  text-transform: uppercase;  /* Transforma o texto para maiúsculas, conferindo um estilo mais forte. */
  letter-spacing: 1px;        /* Adiciona um pequeno espaçamento entre as letras para um visual mais refinado. */
  transition: background-color 0.3s ease, color 0.3s ease; /* Efeito de transição suave para o hover. */
}

#home-section .btn:hover,
#home-section .btn:focus {
  background-color: #e0519a; /* Um tom de vermelho mais escuro para o hover */
  border-color: #e0519a;
  color: white;
  border-radius: 30px;           /*  arredondamento dos cantos, tornando o botão perfeitamente retangular ou arredondado. */
}
/* ===================================================================
   Seção Services - Layout Flexbox
=================================================================== */
#service img {
  max-width: 100%;
  height: auto;
}

#services .imagem-corpo {
    flex: 1;
    padding: 0 20px;
}

#services .services-layout {
  display: flex;
  flex-direction: column; /* Padrão: empilhado (mobile-first) */
  flex-wrap: wrap;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 20px;
  gap: 40px; /* Espaçamento entre os itens (ajuste conforme necessário) */
}

#services h2 {
  margin-left: 2vh;
  margin-right: 2vh;
}

#services p {
  margin-left: 2vh;
  margin-right: 2vh;
}

#services h3 {
  margin-left: 2vh;
  margin-right: 2vh;
}

#services .service-content-column {
  flex: 1;
  max-width: 90vh;
  /* Os itens flex ocuparão a largura total quando empilhados.
     Em telas maiores, o 'flex: 1' abaixo cuidará da largura. */
}

/* Garante que o botão seja claramente visível */
#services .btn {
  /* --- Estilos para o botão retangular com preenchimento sólido --- */
  display: inline-block;    /* Garante que o elemento <a> se comporte como um bloco para padding, mas flua com o texto. */
  padding: 12px 24px;       /* Espaçamento interno do botão (vertical e horizontal). Ajuste conforme o seu gosto. */
  background-color: #e0519a; /* Cor de fundo sólida (ex: vermelho do tema). */
  color: white;               /* Cor do texto do botão (branco para contraste com o fundo vermelho). */
  border: 2px solid #e0519a;    /* Borda da mesma cor do fundo para um visual coeso ou 'border: none;' se preferir sem borda. */
  border-radius: 20px;           /*  arredondamento dos cantos, tornando o botão perfeitamente retangular ou arredondado. */
  text-align: center;         /* Centraliza o texto dentro do botão. */
  text-decoration: none;      /* Remove o sublinhado padrão de links. */
  font-weight: bold;          /* Deixa o texto em negrito para maior destaque. */
  font-size: 1.1em;           /* Tamanho da fonte ligeiramente aumentado. Ajuste se necessário. */
  text-transform: uppercase;  /* Transforma o texto para maiúsculas, conferindo um estilo mais forte. */
  letter-spacing: 1px;        /* Adiciona um pequeno espaçamento entre as letras para um visual mais refinado. */
  transition: background-color 0.3s ease, color 0.3s ease; /* Efeito de transição suave para o hover. */
}

#services .btn:hover,
#services .btn:focus {
  background-color: #e0519a; /* Um tom de vermelho mais escuro para o hover */
  border-color: #e0519a;
  color: white;
  border-radius: 30px;
}

/*-----------------------------------------------------------------------------------
  - Fim da Seção Services -
=====================================================================================

====================================================================================
    - Seção ABOUT - 
-----------------------------------------------------------------------------------*/
#about .about-layout {
  display: flex;
  flex-direction: column; /* Padrão: empilhado (mobile-first) */
  flex-wrap: wrap;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 20px;
  gap: 40px; /* Espaçamento entre os itens (ajuste conforme necessário) */
}

#about .col-ab {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  text-align: justify;
  /* Os itens flex ocuparão a largura total quando empilhados.
     Em telas maiores, o 'flex: 1' abaixo cuidará da largura. */
}

#about .imagem-corpo {
  max-width: 80vh;
}

#about h2 {
  margin-left: 2vh;
}

#about img {
  max-width: 100%;
  height: auto;
  }

/*
 ---------------------------------------------------------------------------------------------
 END about-section
==============================================================================================
*/

/*==========================================================================================--
     - portifolio - section
 ---------------------------------------------------------------------------------------------
  */
.blocos-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; /* rola para baixo se necessário */
}

.bloco {
  width: 200px;
  margin: 10px;
  text-align: center;
  flex-shrink: 0; /* evita encolher demais */
}

.bloco img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.bloco p {
  margin-top: 10px;
  font-size: 16px;
}
  /*
 ---------------------------------------------------------------------------------------------
 END PORTIFOLIO-section
 ---------------------------------------------------------------------------------------------
 
 =============================================================================================
  - Seção - TEAM - 
 -------------------------------------------------------------------------------------------*/
 #team .chefs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

}

#team .row-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: justify;
  margin: 10px;
  margin-right: 30px;
}

/*-------------------------------------------------------------------------------------------
   - Fim de TEAM -
===========================================================================================

============================================================================================
 - Seção do CONTATO
------------------------------------------------------------------------------------------- */

 #contact .row-c {
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
    list-style: none;
    margin-right: 30px;
    margin-bottom: 30px;
 }

.form-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 900px;
  margin: auto;
}

.form-box,
.info-box {
  flex: 1 1 400px;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 15px;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #444;
  font-weight: bold;
}

textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  border: none;
  border-radius: 8px;
  box-shadow: inset 2px 2px 5px #ccc, inset -2px -2px 5px #fff;
  resize: none;
  font-size: 14px;
  background-color: #f9f9f9;
}

button {
  width: 100%;
  margin-top: 15px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background-color: #444;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 3px 3px 8px #bbb;
  transition: 0.3s;
}

button:hover {
  background-color: #222;
}
/*===========================================================================================
    - FOOTER
-------------------------------------------------------------------------------------------*/

.rodape {
    background-color:#a1a1a1f8;
    width: 100%;
    overflow-x: hidden;
    padding: 20px 10px;
    box-sizing: border-box;
  }
  
  .sociais {
  text-align: center;
  padding-bottom: 3vh;
  }

  .sociais ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0 auto;  
  }
 
  .sociais img {
  width: 32px;
  height: 32px;
}
/* Telas maiores (ex: tablets e desktops, >= 768px) */
@media (min-width: 768px) {
  #about .about-layout {
    flex-direction: row; /* Lado a lado */
  }

  #about .col-ab {
    flex: 1;
    padding: 0 20px;
    text-align: justify;
     /* Cada coluna ocupa espaço igual (efetivamente 50% para dois itens) */
    /* Se preferir um controle mais estrito de 50% sem crescimento/encolhimento:
       flex-grow: 0;
       flex-shrink: 0;
       flex-basis: 50%;
    */
  }


 #services .services-layout {
    flex-direction: row; /* Lado a lado */
  }

  #services .service-content-column {
    flex: 1;
     /* Cada coluna ocupa espaço igual (efetivamente 50% para dois itens) */
    /* Se preferir um controle mais estrito de 50% sem crescimento/encolhimento:
       flex-grow: 0;
       flex-shrink: 0;
       flex-basis: 50%;
    */
  }
  #portifolio .blocos-container {
    height: 45vh;
    }

  }