@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');


*{
box-sizing:border-box;
font-family:'Cairo',sans-serif;
}


body{

margin:0;

background:#f5f8fc;

direction:rtl;

}



header{

height:85px;

background:#06283D;

color:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 40px;

}



.logo{

font-size:30px;

font-weight:bold;

}



nav a{

color:white;

text-decoration:none;

margin:0 12px;

}



.btn{

background:#1363DF;

color:white;

padding:12px 25px;

border-radius:12px;

text-decoration:none;

}



.hero{

height:500px;

display:flex;

align-items:center;

padding:50px;

background:white;

}



.hero-text h1{

font-size:45px;

color:#06283D;

}



.hero-text p{

font-size:22px;

}



.stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

padding:40px;

}



.stat{

background:white;

padding:30px;

text-align:center;

border-radius:20px;

box-shadow:0 10px 25px #0001;

}



.stat h2{

color:#1363DF;

font-size:40px;

}



.services{

padding:40px;

text-align:center;

}



.service-box{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}



.service-box div{

background:white;

padding:30px;

border-radius:20px;

}




footer{

background:#06283D;

color:white;

padding:30px;

text-align:center;

margin-top:30px;

}



@media(max-width:900px){

header{

display:block;

height:auto;

padding:20px;

}


.stats{

grid-template-columns:1fr;

}


.service-box{

grid-template-columns:1fr;

}

}


.page{

padding:60px;

text-align:center;

background:white;

margin:30px;

border-radius:20px;

}



.track-form{

max-width:500px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

}



.track-form input,
.track-form textarea{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}




.footer{

background:#06283d;

color:white;

padding:40px 30px 10px;

margin-top:40px;

}



.footer-container{

display:flex;

justify-content:space-between;

align-items:flex-start;

direction:rtl;

gap:30px;

}



.footer h2{

margin:0 0 15px;

}



.footer h3{

margin-bottom:15px;

}



.footer a{

display:block;

color:white;

text-decoration:none;

margin:8px 0;

}



.footer a:hover{

color:#00d4ff;

}



.whatsapp{

background:#25D366;

padding:10px 20px;

border-radius:25px;

display:inline-block !important;

margin-top:10px;

}



.footer-bottom{

text-align:center;

border-top:1px solid #31566b;

margin-top:30px;

padding-top:15px;

font-size:14px;

}



@media(max-width:768px){

.footer-container{

flex-direction:column;

text-align:center;

align-items:center;

}

}




.header{

background:white;

padding:15px 40px;

box-shadow:0 3px 15px rgba(0,0,0,.08);

}


.header-container{

display:flex;

justify-content:space-between;

align-items:center;

direction:rtl;

}



.brand{

display:flex;

align-items:center;

gap:15px;

}



.brand img{

height:75px;

width:auto;

object-fit:contain;

border-radius:12px;

}



.brand-text h2{

margin:0;

color:#06283d;

font-size:24px;

}



.brand-text span{

color:#777;

font-size:14px;

}



.nav{

display:flex;

gap:30px;

}



.nav a{

text-decoration:none;

color:#06283d;

font-weight:bold;

font-size:16px;

}



.nav a:hover{

color:#00a8e8;

}



@media(max-width:768px){

.header-container{

flex-direction:column;

gap:20px;

}


.nav{

flex-wrap:wrap;

justify-content:center;

}

}