/* Reset básico */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html,
 body {
   width: 100%;
   height: 100%;
   font-family: 'Arial', sans-serif;
 }

 body {
   justify-content: center;
   align-items: center;
   background-color: #f8f9fc;
 }

 .full-page-container {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   height: 100%;
 }

 .left-section,
 .right-section {
   flex: 1;
   min-width: 300px;
   height: 100%;
 }

 .left-section {
   padding: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: linear-gradient(45deg, #007bff, #00a5df);
 }

 .left-section .content {
   max-width: 400px;
   width: 100%;
 }

 .right-section .content {
   padding: 0px 20px 0px 20px;
 }

 .login-form {
   margin-top: 20px;
   width: 100%;
 }

 .input-group {
   margin-bottom: 15px;
   display: flex;
   align-items: center;
   position: relative;
 }

 .input-group input {
   width: 100%;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-size: 14px;
 }

 .input-group .fa {
   position: absolute;
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
   color: #888;
 }

 .input-group input {
   width: 100%;
   padding: 10px 10px 10px 35px;
   /* Espaço para o ícone */
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   outline: none;
 }

 .input-group input:focus {
   border-color: #007BFF;
   box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
 }

 .reminder {
   position: relative;
   display: flex;
   justify-content: flex-end;
   font-size: small;
   margin-bottom: 15px;
 }

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

 .btn {
   width: 50%;
   padding: 12px;
   background: linear-gradient(45deg, #007bff, #00a5df);
   color: #fff;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   cursor: pointer;
   transition: background 0.3s;

 }

 .btn:hover {
   background: linear-gradient(45deg, #005bb5, #008cc7);
 }

 .logo_conecta {
   max-width: 70%;
 }

 .logo {
   max-width: 25%;
 }

 .student-image {
   transition: opacity 0.5s ease-in-out;
   opacity: 1;
 }

 .prefeitura {
   position: absolute;
   left: 15px;
   top: 15px;
   width: 300px;
   z-index: 999;

 }

 .right-section {
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 }

 .student-image {
   max-width: 80%;
   height: 90%;
   border-radius: 10px;
   position: absolute;
   bottom: 0%;


 }

 .gradient-box {
   width: 65%;
   height: 85%;
   background: #ffffff2e;
   border-radius: 20px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .conecta {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 /* Estilos responsivos */
 @media (max-width: 768px) {
   .full-page-container {
     flex-direction: column;
   }

   .left-section,
   .right-section {
     width: 100%;
     height: auto;
   }

   .left-section {
     position: relative;
     padding: 20px;
   }

   .gradient-box {
     width: 100%;
     height: 60%;
   }
 }

 @media (max-width: 480px) {
   .right-section {
     padding: 20px;
   }
   .left-section {
    display: none;
    
   }
   .logo {
    width: 100px;
   }

   .btn {
     font-size: 14px;
   }

   .logo_conecta {
     max-width: 60%;
   }

   .logo {
     max-width: 60%;
   }

 }