html, body { border:0 !important; background:none !important; }
html { background-color:#023977 !important; }
html { background-image:url(GLPI%20Brasil%20‹%20Fazer%20login_files/BackFundo.png) !important; }
html { background-repeat:no-repeat !important; }
html { background-size:cover !important; }
html { background-attachment:fixed !important; }

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 10rem;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.15rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1; 
  width: 300px;
  text-decoration-line: none;
}
.button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0cf;
  border-radius: 10rem;
  z-index: -2;
}
.button:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #008fb3;
  transition: all 0.3s;
  border-radius: 10rem;
  z-index: -1;
}
.button:hover {
  color: #fff;
}
.button:hover:before {
  width: 100%;
}


.container{
    margin-top: 23px;
}



body {
    margin: 0;
    
}

.header {
    position: relative;
    height: 120px;
    display: flex;
    flex-direction: column;
}

.header-top {
    background-color: #FF6600; /* Laranja */
    height: 50%; /* Metade superior */
}

.header-bottom {
    background-color: #003366; /* Azul escuro */
    height: 50%; /* Metade inferior */
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    color: white;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

.logo-container {
    background-color: #fff;
    position: absolute;
    top: -40px;
    left: 0;
    height: 160px;
    width: 20%;
    z-index: 1; /* Garante que a imagem fique atrás do texto */
    overflow: hidden;
}
.logo-container img {
    height: 110%;
    width: 90%;
    object-fit: cover; /* Garante que a imagem ocupe todo o espaço sem distorcer */
    align-items: center;
}

.btn2{
    text-decoration-line: none;
    text-underline-offset: none;
    font-family: arial;
}
.btn1{
    text-decoration-line: none;
    text-underline-offset: none;
    font-family: arial;

}


@media (min-width: 777px) and (max-width: 902px) {

    html, body { 
        border: 0 !important; 
        background: none !important; 
    }
    html { 
        background-color: #023977 !important; 
        background-image: url(GLPI%20Brasil%20‹%20Fazer%20login_files/BackFundoResp1.png) !important; 
        background-repeat: no-repeat !important; 
        background-size: cover !important; 
        background-position: center !important; /* Centraliza o background */
        background-attachment: fixed !important; 
    }
    .header {
        height: 100px; /* Ajusta altura do cabeçalho */
        position: relative;
        background-image: url('GLPI%20Brasil%20‹%20Fazer%20login_files/logoSMC1.png'); /* Imagem ocupa todo o cabeçalho */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center; /* Centraliza a imagem no cabeçalho */
    }
  
    .header .title {
        font-size: 30px; /* Reduz tamanho da fonte do título */
    }
  
    .logo-container {
        height: 140px;
        width: 25%; /* Aumenta largura do logo */
    }
  
    .button {
        width: 250px; /* Reduz largura dos botões */
        font-size: 0.9rem; /* Ajusta tamanho do texto */
        display: flex;
        align-items: center; /* Centraliza o conteúdo verticalmente */
    }
  
    .container {
        margin-top: 15px; /* Reduz margem superior */
    }
    .btn1 .button{
        height: 42px;
        margin-top: 10px;
        
    }
    .btn2 .button{
        height: 42px;
        margin-top: 10px;
    }
  }

  
  @media (min-width: 501px) and (max-width: 776px){

    html, body { 
        border: 0 !important; 
        background: none !important; 
    }
    html { 
        background-color: #023977 !important; 
        background-image: url(GLPI%20Brasil%20‹%20Fazer%20login_files/BackFundoResp1.png) !important; 
        background-repeat: no-repeat !important; 
        background-size: cover !important; 
        background-position: center !important; /* Centraliza o background */
        background-attachment: fixed !important; 
    }
    .header {
        height: 100px; /* Ajusta altura do cabeçalho */
        position: relative;
        background-image: url('GLPI%20Brasil%20‹%20Fazer%20login_files/logoSMC1.png'); /* Imagem ocupa todo o cabeçalho */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center; /* Centraliza a imagem no cabeçalho */
    }
  
    .header .title {
        font-size: 27px; /* Reduz tamanho da fonte do título */
    }
  
    
    .logo-container {
        width: 30%; /* Ocupa toda a largura do cabeçalho */
        max-width: 300px; /* Limita a largura máxima da logo */
        height: 90px; /* Mantém proporção */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-container img {
        width: 120px; /* Ajusta a largura da imagem ao container */
        height: 120px; /* Mantém proporção da imagem */
        object-fit: contain; /* Garante que a imagem não seja cortada */
        padding-top: 30px;
    }

     /* Ajustes dos botões */
     .button {
        width: 350px; /* Reduz largura dos botões */
        font-size: 19px; /* Reduz tamanho do texto dos botões */
     /* Ajusta o preenchimento */
        margin: 0px auto; /* Centraliza os botões */
        display: block;
        
    }


    /* Ajuste dos contêineres */
    .container, .container2 {
        margin-top: 10px; /* Reduz margem superior */
        text-align: center; /* Centraliza os elementos */
    }

    .btn1, .btn2 {
        width: 100%; /* Botões ocupam a largura total do container */
        height: 50px;
        text-align: center;
    }

    .btn2 .button{
        height: 25px;
    
    }
    .btn1 .button{
        height: 25px;
    
    }
    a .button{
        text-align: center;
       
    }
  }




  @media (min-width: 305px) and (max-width: 500px) {

    /* Ajustes gerais */
    html, body { 
        border: 0 !important; 
        background: none !important; 
    }
    html { 
        background-color: #023977 !important; 
        background-image: url(GLPI%20Brasil%20‹%20Fazer%20login_files/BackFundoResp1.png) !important; 
        background-repeat: no-repeat !important; 
        background-size: cover !important; 
        background-position: center !important; /* Centraliza o background */
        background-attachment: fixed !important; 
    }

    /* Ajustes do cabeçalho */
    .header {
        height: 80px; /* Reduz a altura do cabeçalho */
        background-image: url('GLPI%20Brasil%20‹%20Fazer%20login_files/logoSMC1.png'); /* Imagem no cabeçalho */
        background-repeat: no-repeat;
        background-size: contain; /* Adapta o tamanho da imagem ao cabeçalho */
        background-position: center center; /* Centraliza a imagem no cabeçalho */
    }

    .header .title {
        font-size: 26px; /* Reduz tamanho da fonte do título */
        text-align: center;
        padding-top: 10px; /* Dá espaço no topo para o texto */
    }


    /* Ajustes dos botões */
    .button {
        width: 200px; /* Reduz largura dos botões */
        font-size: 1rem; /* Reduz tamanho do texto dos botões */
        padding: 0.5rem 1rem; /* Ajusta o preenchimento */
        margin: 10px auto; /* Centraliza os botões */
        display: flex;
        align-items: center; /* Centraliza o conteúdo verticalmente */
        justify-content: center;
    }


    /* Ajuste dos contêineres */
    .container, .container2 {
        margin-top: 10px; /* Reduz margem superior */
        text-align: center; /* Centraliza os elementos */
    }

    .btn1, .btn2 {
        width: 100%; /* Botões ocupam a largura total do container */
    }

    .btn1 .button{
        height: 30px;
    
    }

    .header .title {
        font-size: 20px; /* Reduz tamanho da fonte do título */
        color: white; /* Mantém o texto visível no fundo laranja */
        margin: 5px 0; /* Ajusta o espaço ao redor do título */
        text-align: center;
    }

   
    .logo-container {
        width: 30%; /* Ocupa toda a largura do cabeçalho */
        max-width: 300px; /* Limita a largura máxima da logo */
        height: 80px; /* Mantém proporção */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-container img {
        width: 80px; /* Ajusta a largura da imagem ao container */
        height: 80px; /* Mantém proporção da imagem */
        object-fit: contain; /* Garante que a imagem não seja cortada */
        padding-top: 30px;
    }
}