/* =========================================
   RESET
========================================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Poppins' sans-serif;
  
}

/* =========================================
   HERO
========================================= */
.hero-certificacoes{
  position:relative;
  overflow:hidden;

  padding:120px 6%;

  background:
  radial-gradient(circle at center, rgba(0,80,180,.25), transparent 40%),
  linear-gradient(90deg,#02142C 0%, #00275E 50%, #02142C 100%);
}

.hero-overlay{
  position:absolute;
  inset:0;

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

  background-size:14px 14px;

  opacity:.08;
}

.hero-cert-container{
  max-width:1450px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;

  position:relative;
  z-index:2;
}

.hero-cert-content{
  max-width:700px;
}

.hero-cert-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;

  padding:14px 24px;

  border:2px solid #F4C400;
  border-radius:10px;

  color:#F4C400;

  font-size:17px;
  font-weight:700;

  margin-bottom:35px;
}

.hero-cert-content h1{
  color:#fff;
  font-size:50px;
  line-height:1.05;
  font-weight:900;
  margin-bottom:30px;
}

.hero-cert-content h1 span{
  color:#F4C400;
}

.hero-cert-content p{
  color:#fff;

  font-size:24px;
  line-height:1.8;

  margin-bottom:35px;

  opacity:.95;
}

.hero-cert-image img{
  width:100%;
  max-width:650px;
}

/* =========================================
   QUALIFICAÇÕES
========================================= */
.qualificacoes-section{
  padding:110px 6%;

  background:#ffffff;
}

.qualificacoes-container{
  max-width:1450px;
  margin:auto;
}

.qualificacoes-header{
  text-align:center;

  max-width:900px;

  margin:0 auto 70px;
}

.qualificacoes-header span{
  color:#F4C400;

  font-size:18px;
  font-weight:700;
}

.qualificacoes-header h2{
  color:#0a0a0a;

  font-size:44px;
  line-height:1.2;

  margin:18px 0 20px;

  font-weight:900;
}

.qualificacoes-header h2 span{
  color:#F4C400;
}

.qualificacoes-header p{
  color:#0e0d0d;

  font-size:22px;
  line-height:1.7;

  opacity:.9;
}

.qualificacoes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.qualificacao-card{
  background:
  linear-gradient(180deg,#042B66 0%, #001A40 100%);

  border:1px solid rgba(255,255,255,.08);

  border-radius:18px;

  padding:35px;

  transition:.4s;
}

.qualificacao-card:hover{
  transform:translateY(-10px);
  border-color:#F4C400;
}

.qualificacao-icon{
  width:85px;
  height:85px;

  border-radius:18px;

  background:#00152E;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#F4C400;

  font-size:36px;

  margin-bottom:28px;
}

.qualificacao-card h3{
  color:#fff;

  font-size:28px;
  line-height:1.4;

  margin-bottom:18px;
}

.qualificacao-card p{
  color:#fff;

  opacity:.9;

  font-size:17px;
  line-height:1.8;
}

/* =========================================
   ISO
========================================= */
.iso-section{
  padding:110px 6%;

  background:
  linear-gradient(90deg,#02142C 0%, #00275E 50%, #02142C 100%);
}

.iso-container{
  max-width:1450px;
  margin:auto;
}

.iso-header{
  text-align:center;

  margin-bottom:70px;
}

.iso-header span{
  color:#F4C400;

  font-size:18px;
  font-weight:700;
}

.iso-header h2{
  color:#fff;

  font-size:44px;
  line-height:1.2;

  margin:18px 0 20px;

  font-weight:900;
}

.iso-header h2 span{
  color:#F4C400;
}

.iso-header p{
  color:#fff;

  font-size:22px;
}

.iso-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.iso-card{
  background:#fff;

  border-radius:18px;

  padding:35px;

  transition:.4s;
}

.iso-card:hover{
  transform:translateY(-10px);
}

.iso-top{
  display:flex;
  align-items:center;
  gap:24px;

  margin-bottom:30px;
}

.iso-image-logo{
  width:110px;
  height:110px;

  border-radius:18px;

  overflow:hidden;

  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px;

  box-shadow:
  0 10px 30px rgba(0,0,0,.12);
}

.iso-image-logo img{
  width:100px;
  height:100px;

  object-fit:fill;
}

.iso-info h3{
  color:#02152D;

  font-size:35px;

  margin-bottom:10px;
}

.iso-info span{
  color:#F4C400;

  font-size:15px;
  font-weight:800;
}

.iso-card p{
  color:#333;

  font-size:18px;
  line-height:1.8;
}

/* =========================================
   BENEFÍCIOS
========================================= */
.beneficios-certificacoes{
  padding:110px 6%;

  background:#fff;
}

.beneficios-container{
  max-width:1450px;
  margin:auto;
}

.beneficios-header{
  text-align:center;

  margin-bottom:70px;
}

.beneficios-header span{
  color:#F4C400;

  font-size:18px;
  font-weight:700;
}

.beneficios-header h2{
  color:#080808;

  font-size:44px;

  margin-top:18px;

  font-weight:900;
}

.beneficios-header h2 span{
  color:#F4C400;
}

.beneficios-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
}

.beneficio-box{
  background:
  linear-gradient(180deg,#042B66 0%, #001A40 100%);

  border-radius:18px;

  padding:40px 25px;

  text-align:center;

  border:1px solid rgba(255,255,255,.08);

  transition:.4s;
}

.beneficio-box:hover{
  transform:translateY(-8px);
  border-color:#F4C400;
}

.beneficio-box i{
  color:#F4C400;

  font-size:42px;

  margin-bottom:25px;
}

.beneficio-box h3{
  color:#fff;

  font-size:24px;
  line-height:1.5;
}

/* =========================================
   RESPONSIVO
========================================= */
@media(max-width:1200px){

  .qualificacoes-grid,
  .iso-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .beneficios-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .hero-cert-container{
    flex-direction:column;
  }

  .hero-cert-content{
    max-width:100%;
  }

  .hero-cert-image img{
    display: none;
  }

  .hero-cert-badge{
  margin-top: 100px;
  margin-bottom:35px;
}

}

@media(max-width:768px){

   .hero-certificacoes{
  
 height: 500px;

}
  .hero-certificacoes,
  .qualificacoes-section,
  .iso-section,
  .beneficios-certificacoes{
    padding:40px 20px;
    
  }

  .hero-cert-content h1{
    font-size:30px;
  }

  .hero-cert-content p{
    font-size:18px;
  }

  .qualificacoes-header h2,
  .iso-header h2,
  .beneficios-header h2{
    font-size:38px;
  }

  .qualificacoes-grid,
  .iso-grid,
  .beneficios-grid{
    grid-template-columns:1fr;
  }

  .qualificacao-card h3{
    font-size:24px;
  }

  .iso-top{
    flex-direction:column;
    align-items:flex-start;
  }

}