*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden;font-family:Poppins,sans-serif;}
.container{width:100%;max-width:1400px;margin:auto;padding:0 20px;}
header{position:sticky;top:0;background:#fff;z-index:999;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:15px 0;}
.logo{height:70px;}
nav{display:flex;gap:25px;}
nav a{text-decoration:none;color:#111;}
.hero{position:relative;height:650px;background:url('assets/hero-bg.png') center/cover no-repeat;overflow:hidden;}
.overlay{position:absolute;inset:0;background:linear-gradient(to right,#03162f 40%,transparent);}
.hero-content{position:relative;z-index:2;height:100%;display:flex;align-items:center;color:#fff;}
.hero-text{max-width:700px;}
h1{font-size:72px;line-height:1.1;}
.hero-text span{color:#1d84ff;}
.hero-text p:not(.subtitle){font-size:34px;line-height:1.5;margin-bottom:55px;}
.buttons{display:flex;gap:15px;}
.btn{padding:16px 20px;border-radius:8px;text-decoration:none;}
.primary{background:#1766ff;color:#fff;}
.secondary{border:2px solid #fff;color:#fff;}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px 0;}
.card{background:#fff;padding:25px;border-radius:15px;}
input,textarea,button{width:100%;padding:15px;margin-bottom:15px;}
.whatsapp-float{position:fixed;right:20px;bottom:20px;width:60px;height:60px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;}

@media (max-width:768px){
    .nav{flex-direction:column;text-align:center;}
    nav{flex-direction:column;gap:12px;}
    .logo{height:60px;}
    .hero{height:auto;padding:60px 0;}
    .hero-text{max-width:100%;padding:10px;}
    h1{font-size:42px !important;}
    .hero-text p:not(.subtitle){font-size:22px !important;margin-bottom:35px;}
    .buttons{flex-direction:column;}
    .btn{width:100%;text-align:center;}
    
.services{
    padding:30px 15px;
}

.cards{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:14px !important;
    width:100% !important;
    padding:0 !important;
    align-items:stretch;
}

.card{
    width:100% !important;
    min-height:150px !important;
    height:auto !important;
    padding:18px !important;
    border-radius:16px;
    display:flex !important;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
}

.card i{
    font-size:28px !important;
    margin-bottom:15px !important;
    color:#1d84ff;
}

.card h3{
    font-size:18px !important;
    line-height:1.35 !important;
    margin:0;
}

}