*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;
}

body{

background:#fff;
color:#222;

}

.container{

width:90%;
max-width:1300px;
margin:auto;

}

header{

background:white;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,.05);

}

header .container{

display:flex;
justify-content:space-between;
align-items:center;
height:90px;

}

.logo{

display:flex;
align-items:center;

}

.logo img{

height:75px;
width:auto;
display:block;

}

nav ul{

display:flex;
align-items:center;
gap:35px;
list-style:none;

}

nav ul li a{

text-decoration:none;
font-size:16px;
font-weight:600;
color:#082B5C;
transition:.3s;

}

nav ul li a:hover{

color:#F26B21;

}

.nav-btn{

background:#F26B21;
color:#fff !important;
padding:12px 24px;
border-radius:30px;

}

.nav-btn:hover{

background:#082B5C;
color:#fff !important;

}

nav ul{

display:flex;
list-style:none;
gap:35px;

}

nav a{

text-decoration:none;
color:#0d1b2a;
font-weight:600;

}

.right{

display:flex;
gap:20px;
align-items:center;

}

.icon{

text-decoration:none;
font-size:20px;

}

.btn{

padding:14px 28px;
background:#005bbb;
color:white;
border-radius:40px;
text-decoration:none;
font-weight:700;

}

.hero{

background:#082B5C;
padding:90px 0;
overflow:hidden;

}

.hero-grid{

display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:60px;

}

.hero-tag{

display:inline-block;
background:#ffffff20;
color:#fff;
padding:10px 22px;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:25px;

}

.hero h1{

font-size:64px;
line-height:1.1;
font-weight:800;
color:#F36B21;
margin-bottom:25px;

}

.hero p{

font-size:19px;
line-height:1.9;
color:#fff;
max-width:620px;
margin-bottom:40px;

}

.hero-buttons{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.primary{

background:#F36B21;
color:#fff;
padding:16px 34px;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:.3s;

}

.primary:hover{

background:#fff;
color:#082B5C;

}

.secondary{

border:2px solid #fff;
color:#fff;
padding:16px 34px;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:.3s;

}

.secondary:hover{

background:#fff;
color:#082B5C;

}

.hero-info{

display:flex;
gap:25px;
margin-top:55px;
flex-wrap:wrap;

}

.info-box{

background:#ffffff15;
backdrop-filter:blur(10px);
padding:20px 28px;
border-radius:18px;
min-width:150px;

}

.info-box h3{

font-size:34px;
color:#fff;
margin-bottom:6px;

}

.info-box span{

color:#ddd;
font-size:15px;

}

.hero-image{

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

}

.hero-image img{

width:100%;
max-width:500px;

}

@media(max-width:991px){

.hero-grid{

grid-template-columns:1fr;
text-align:center;

}

.hero h1{

font-size:44px;

}

.hero p{

margin:auto;
margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.hero-info{

justify-content:center;

}

.hero-image{

margin-top:50px;

}

}



.clients{

padding:60px 0;
background:white;

}

.clients .container{

display:flex;
justify-content:space-between;
gap:20px;

}

.client-box{

background:#f5f7fb;
padding:30px;
flex:1;
text-align:center;
border-radius:15px;
font-weight:700;
transition:.3s;

}

.client-box:hover{

background:#005bbb;
color:white;

}

.products{

padding:100px 0;

}

.title{

text-align:center;
margin-bottom:60px;

}

.title h2{

font-size:48px;
color:#072a5e;

}

.title p{

margin-top:15px;
font-size:20px;
color:#555;

}

.cards{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.card{

border-radius:20px;
overflow:hidden;
background:white;
box-shadow:0 20px 40px rgba(0,0,0,.08);
transition:.4s;

}

.card:hover{

transform:translateY(-12px);

}

.card img{

width:100%;

}

.content{

padding:35px;

}

.content h3{

font-size:30px;
margin-bottom:20px;

}

.content p{

line-height:1.8;
margin-bottom:25px;

}

.content a{

color:#005bbb;
text-decoration:none;
font-weight:700;

}

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

}

.cards{

grid-template-columns:1fr;

}

nav{

display:none;

}

.clients .container{

flex-direction:column;

}

.hero h1{

font-size:50px;

}

}

.footer{

background:#082B5C;
padding:80px 0 30px;
color:white;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:60px;

}

.footer-logo h2{

font-size:42px;
margin-bottom:20px;
font-weight:800;

}

.footer-logo p{

line-height:1.8;
opacity:.8;
margin-bottom:30px;

}

.footer h4{

font-size:22px;
margin-bottom:25px;

}

.footer ul{

list-style:none;

}

.footer ul li{

margin-bottom:15px;

}

.footer ul li a{

color:white;
opacity:.75;
text-decoration:none;
transition:.3s;

}

.footer ul li a:hover{

opacity:1;
padding-left:8px;
color:#ff8a5b;

}

.social{

display:flex;
gap:15px;

}

.social a{

width:46px;
height:46px;
display:flex;
justify-content:center;
align-items:center;

background:white;
color:#082B5C;

border-radius:50%;

font-size:18px;

transition:.3s;

text-decoration:none;

}

.social a:hover{

background:#ff8a5b;
color:white;
transform:translateY(-5px);

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.15);

text-align:center;

opacity:.7;

}

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:70px;

height:70px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 15px 35px rgba(0,0,0,.25);

z-index:9999;

animation:float 2s infinite;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

.whatsapp img{

width:40px;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.whatsapp{

width:60px;

height:60px;

}

.whatsapp img{

width:34px;

}

}

.footer{

background:#082B5C;
padding:80px 0 30px;
color:white;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:60px;

}

.footer-logo h2{

font-size:42px;
margin-bottom:20px;
font-weight:800;

}

.footer-logo p{

line-height:1.8;
opacity:.8;
margin-bottom:30px;

}

.footer h4{

font-size:22px;
margin-bottom:25px;

}

.footer ul{

list-style:none;

}

.footer ul li{

margin-bottom:15px;

}

.footer ul li a{

color:white;
opacity:.75;
text-decoration:none;
transition:.3s;

}

.footer ul li a:hover{

opacity:1;
padding-left:8px;
color:#ff8a5b;

}

.social{

display:flex;
gap:15px;

}

.social a{

width:46px;
height:46px;
display:flex;
justify-content:center;
align-items:center;

background:white;
color:#082B5C;

border-radius:50%;

font-size:18px;

transition:.3s;

text-decoration:none;

}

.social a:hover{

background:#ff8a5b;
color:white;
transform:translateY(-5px);

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.15);

text-align:center;

opacity:.7;

}

.footer-logo{

display:flex;
flex-direction:column;

}

.footer-logo-img{

width:220px;
height:auto;
object-fit:contain;
margin-bottom:20px;
display:block;

}

.right{

display:flex;
align-items:center;
gap:20px;

}

.login-btn{

padding:13px 26px;
background:#F36B21;
color:#fff;
border-radius:10px;
font-weight:600;
transition:.3s;

}

.login-btn:hover{

background:#082B5C;

}

.user-profile{

display:flex;
align-items:center;
gap:12px;
background:#fff;
padding:8px 14px;
border-radius:50px;
cursor:pointer;
box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.user-profile img{

width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
border:2px solid #F36B21;

}

.user-info h5{

font-size:15px;
color:#082B5C;
margin-bottom:3px;

}

.user-info span{

font-size:12px;
color:#888;

}

.user-profile i{

color:#082B5C;

}

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:70px;

height:70px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 15px 35px rgba(0,0,0,.25);

z-index:9999;

animation:float 2s infinite;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

.whatsapp img{

width:40px;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.whatsapp{

width:60px;

height:60px;

}

.whatsapp img{

width:34px;

}

}