@import url("fonts.css");
@import url("bootstrap-icons.min.css");

:root {
  --primary-color: #20c997;
  --bs-primary: #20c997; /* opcional se quiser sobrescrever o padrão do Bootstrap */
}

body {
    font-family: 'Poppins', sans-serif;
	background: linear-gradient(155deg, var(--primary-color), #2c2c2c);
    color: #fff;
    scroll-behavior: smooth;
}

header {
    color: white;
    padding: 5rem 1rem;
    text-align: center;
    background-size: cover;
    background-position: center;
	background-color: var(--bs-dark);
    
}

header h1 {
    font-size: 3rem;
    font-weight: 700;
}
header p {
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

section {
    padding: 1rem 1rem;
}
ul li {
    list-style-type: square;
}
ul li::marker {
    color: var(--primary-color);
}
ul.ul-danger li::marker {
    color: var(--bs-danger);
}

a {
	text-decoration: none;
}

.section-title {
    font-weight: 700;
    font-size: 1.6rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.section-subtitle {
    font-weight: 500;
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.icon-box {
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    background: transparent;
    border: 3px solid #d1e7dd;
}

.icon-box p{
	color: var(--bs-light) !important;
}

.icon-box h5 {
    color: #343a40;
    font-weight: 600;
    margin-top: 0.75rem;
}

.icon-box:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.1) 
}

/* cores personalizadas  */
.text-primary {
  color: var(--primary-color) !important;
}
.bg-primary, .btn-primary {
  background-color: var(--primary-color) !important;
}
.bg-primary-light {
    background-color: #d8e6e2 !important;
}

/* Responsividade (@medias) */

/* Web/Desktop - a partir de 768px de largura de tela (tablets na horizontal, notebooks, monitores)*/
@media (min-width: 768px) {
  .logo-programa {
    height: 100px !important;
    width: auto !important;
  }
   /*
   .logo-refis{
	  width:250px !important; 
	  height:auto !important;
  }
  */
}

/* Mobile - tamanho 0px até 767.98px de largura da tela (smartphones na vertical ou dispositivos menores) */
@media (max-width: 767.98px) {
  .logo-programa {
    height: auto !important;
    max-width: 100% !important;
  }
  .logo-regularize{
	  height:100px !important; 
	  width: auto !important;
  }
}