*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Outfit',sans-serif;
background:#04172f;
color:white;
overflow-x:hidden;
}
.container{
width:min(1320px,92%);
margin:auto;
}
.navbar{
position:fixed;
top:0;
width:100%;
background:rgba(4,23,47,.82);
backdrop-filter:blur(10px);
z-index:999;
border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-content{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 0;
}
.logo-wrap{
display:flex;
align-items:center;
gap:14px;
}
.logo-wrap img{
height:68px;
}
.logo-text{
font-weight:700;
font-size:1.05rem;
}
nav{
display:flex;
gap:28px;
}
nav a{
color:white;
text-decoration:none;
}
.btn-primary{
display:inline-block;
background:#dff200;
color:#08233f;
padding:14px 24px;
border-radius:14px;
font-weight:800;
text-decoration:none;
border:none;
cursor:pointer;
}
.btn-secondary{
display:inline-block;
border:1px solid rgba(255,255,255,.18);
padding:14px 24px;
border-radius:14px;
text-decoration:none;
color:white;
}
.hero{
height:100vh;
display:flex;
align-items:center;
position:relative;
background:linear-gradient(rgba(4,23,47,.82),rgba(4,23,47,.94));
}
.hero-content{
position:relative;
z-index:2;
}
.hero small{
color:#dff200;
font-weight:700;
text-transform:uppercase;
}
.hero h1{
font-size:4.5rem;
line-height:1;
margin:20px 0;
}
.hero p{
max-width:760px;
line-height:1.8;
color:#d8e5f1;
font-size:1.1rem;
}
.hero-buttons{
display:flex;
gap:18px;
margin-top:38px;
}
.section{
padding:95px 0;
}
.services-section,
.certifications-section,
.contact-section{
background:linear-gradient(180deg,#04172f 0%,#07244a 100%);
}
.products-section{
background:linear-gradient(180deg,#dce7f0 0%,#eef4f9 100%);
color:#08233f;
}
.section-title{
text-align:center;
margin-bottom:60px;
}
.section-title h2{
font-size:3rem;
margin-bottom:14px;
}
.services-grid,
.products-grid,
.cert-grid{
display:grid;
gap:24px;
}
.services-grid{
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.products-grid{
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.cert-grid{
grid-template-columns:repeat(5,1fr);
}
.service-card,
.product-card,
.cert-card{
border-radius:26px;
transition:.35s ease;
}
.service-card{
background:linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%);
padding:34px;
color:#08233f;
min-height:240px;
}
.service-card:hover,
.product-card:hover,
.cert-card:hover{
transform:translateY(-8px);
}
.service-icon{
width:74px;
height:74px;
border-radius:20px;
background:#e7f3fb;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
margin-bottom:24px;
}
.service-card h3{
font-size:1.8rem;
margin-bottom:18px;
}
.service-card p{
line-height:1.8;
color:#53697d;
}
.product-card{
background:linear-gradient(180deg,#ffffff 0%,#edf4f9 100%);
padding:30px;
color:#08233f;
}
.product-card h3{
margin-bottom:14px;
}
.product-card p{
line-height:1.7;
color:#53697d;
}
.cert-card{
position:relative;
background:linear-gradient(180deg,#dfe9f1 0%,#edf4f9 100%);
padding:18px 14px 34px;
min-height:155px;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
color:#08233f;
}
.cert-card span{
position:absolute;
right:12px;
bottom:10px;
font-size:.68rem;
font-weight:700;
}
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:34px;
}
.contact-box{
background:linear-gradient(180deg,#08233f,#04172f);
padding:38px;
border-radius:28px;
}
.contact-box p{
margin-top:18px;
}
.contact-box a{
color:#dff200;
text-decoration:none;
}
input,textarea{
width:100%;
padding:15px;
margin-top:12px;
border-radius:12px;
border:none;
}
footer{
background:#021120;
padding:70px 0 30px;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
}
.footer-logo{
height:90px;
margin-bottom:20px;
}
.whatsapp{
position:fixed;
right:18px;
bottom:18px;
width:58px;
height:58px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.6rem;
color:white;
text-decoration:none;
}
@media(max-width:1100px){
.cert-grid{
grid-template-columns:repeat(3,1fr);
}
}
@media(max-width:768px){
nav{
display:none;
}
.hero h1{
font-size:2.8rem;
}
.services-grid,
.products-grid,
.cert-grid,
.contact-grid,
.footer-grid{
grid-template-columns:1fr;
}
.hero-buttons{
flex-direction:column;
align-items:flex-start;
}
.logo-wrap img{
height:56px;
}
.section{
padding:80px 0;
}
}