@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');



body {

  font-family: 'Inter', sans-serif;

}



/* ======================================= */

/* BOTÃO COM EFEITO VIDRO (GLASSMORPHISM)  */

/* ======================================= */

.btn-glass {

  display: inline-block;

  padding: 1rem 2.5rem;

  border-radius: 9999px;

  font-weight: 700;

  font-size: 1.125rem;

  color: white;

  background-color: rgba(0, 76, 151, 0.8);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  transition: all 0.4s ease-in-out;

}



.btn-glass:hover {

  background-color: rgba(255, 255, 255, 0.25);

  animation: pulse-effect 2s infinite ease-in-out;

}



/* ======================================= */

/* VARIANTE ESCURA DO BOTÃO DE VIDRO       */

/* ======================================= */

.btn-glass-dark {

  display: inline-block;

  padding: 1rem 2.5rem;

  border-radius: 9999px;

  font-weight: 700;

  font-size: 1.125rem;

  color: #1a365d;

  background-color: rgba(255, 255, 255, 0.4);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.7);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  transition: all 0.4s ease-in-out;

}



.btn-glass-dark:hover {

  background-color: rgba(255, 255, 255, 0.6);

  animation: pulse-effect 2s infinite ease-in-out;

}



/* ======================================= */

/* VARIANTE AZUL (#004C97)                 */

/* ======================================= */

.btn-glass-blue {

  display: inline-block;

  padding: 1rem 2.5rem;

  border-radius: 9999px;

  font-weight: 700;

  font-size: 1.125rem;

  color: white;

  background-color: rgba(0, 76, 151, 0.8);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.3);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  transition: all 0.4s ease-in-out;

}



.btn-glass-blue:hover {

  background-color: rgba(0, 76, 151, 0.8);

  animation: pulse-effect 2s infinite ease-in-out;

}



/* ======================================= */

/* EFEITO "GLOW"                           */

/* ======================================= */

.section-with-glow {

  position: relative;

  overflow: hidden;

}



.section-with-glow::before {

  content: '';

  position: absolute;

  z-index: 0;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 800px;

  height: 800px;

  background-image: radial-gradient(circle,

      rgba(0, 76, 151, 0.1),

      rgba(0, 76, 151, 0) 70%);

  pointer-events: none;

}



/* ======================================= */

/* MEDIA QUERIES (MOBILE)                  */

/* ======================================= */

@media (max-width: 768px) {

  

  /* Botões mais pequenos em mobile */

  .btn-glass {

    padding: 0.75rem 1.5rem; 

    font-size: 1rem;    

  }



  .btn-glass-blue {

    padding: 0.75rem 1.5rem; 

    font-size: 1rem;    

  }



  .btn-glass-dark {

    padding: 0.75rem 1.5rem; 

    font-size: 1rem;      

  }

}



/* ======================================= */

/* ANIMAÇÃO PULSE                          */

/* ======================================= */

@keyframes pulse-effect {

  0% {

    transform: scale(1);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  }

  50% {

    transform: scale(1.03); 

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);

  }

  100% {

    transform: scale(1);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  }

}





/* ======================================= */

/* (Grid Pattern)                          */

/* ======================================= */

.bg-grid-pattern {

  background-image: radial-gradient(#004C97 1px, transparent 1px);

  background-size: 40px 40px; 

  mask-image: linear-gradient(to bottom, transparent, 10% black, 90% black, transparent); 

  -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 40%, black 70%, transparent 95%);

  opacity: 0.05; 

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  pointer-events: none;

}





/* ======================================= */

/* SCROLL                                  */

/* ======================================= */



::-webkit-scrollbar {

  width: 14px; 

}



::-webkit-scrollbar-track {

  background: #f8fafc; 

}



::-webkit-scrollbar-thumb {

  background-color: #004C97; 

  border-radius: 10px;       

  border: 4px solid #f8fafc; 

}





::-webkit-scrollbar-thumb:hover {

  background-color: #003366; 

  border: 3px solid #f8fafc; 

}



html {

  scrollbar-width: thin;

  scrollbar-color: #004C97 #f8fafc;

}