/* =========================
GLOBAL RESET
========================= */

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


html{
scroll-behavior:smooth;
}


body{

font-family:"Inter",Arial,sans-serif;

background:#ffffff;

color:#132238;

line-height:1.7;

font-size:18px;

overflow-x:hidden;

}



/* =========================
SECTIONS
========================= */


section{

padding:100px 70px;

}



section > *{

max-width:1200px;

margin-left:auto;

margin-right:auto;

}



.section{

background:#ffffff;

}


.section.alt{

background:#f2f6fb;

}



/* =========================
NAVBAR
========================= */


.navbar{

position:sticky;

top:0;

z-index:1000;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 70px;

background:#07182b;

}



.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.site-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}




nav{

display:flex;

align-items:center;

gap:25px;

}



nav a{

color:#d8e3ef;

text-decoration:none;

font-size:15px;

transition:.3s;

padding:8px;

}



nav a:hover{

color:white;

}



/* =========================
DROPDOWN
========================= */


.dropdown{

position:relative;

}



.dropdown-content{

display:none;

position:absolute;

top:35px;

left:0;

background:#07182b;

min-width:260px;

padding:15px;

border-radius:12px;

box-shadow:0 20px 50px rgba(0,0,0,.3);

}



.dropdown-content a{

display:block;

padding:12px;

}



.dropdown-content a:hover{

background:rgba(255,255,255,.08);

}



.dropdown:hover .dropdown-content{

display:block;

}



/* =========================
HERO
========================= */


.hero{

display:flex;

align-items:center;

gap:80px;

background:

linear-gradient(
135deg,
#07182b,
#123c68
);

color:white;

padding:140px 70px;

}



.hero-content{

max-width:650px;

}



.hero h1{

font-family:"Space Grotesk";

font-size:58px;

line-height:1.1;

letter-spacing:-1px;

}



.hero p{

margin-top:25px;

color:#dce7f5;

font-size:20px;

}



.hero-image img{

width:100%;

max-width:550px;

border-radius:25px;

box-shadow:0 30px 70px rgba(0,0,0,.35);

}



/* =========================
BUTTONS
========================= */


.btn-primary,
button{

display:inline-block;

margin-top:30px;

padding:16px 35px;

background:#0066ff;

color:white;

border-radius:8px;

text-decoration:none;

font-weight:600;

border:none;

transition:.3s;

}



.btn-primary:hover,
button:hover{

background:#004dcc;

transform:translateY(-3px);

}



/* =========================
HEADINGS
========================= */


h2{

font-family:"Space Grotesk";

font-size:42px;

text-align:center;

color:#07182b;

margin-bottom:25px;

}



h3{

font-size:23px;

color:#07182b;

margin-bottom:15px;

}



p{

max-width:900px;

margin:auto;

text-align:center;

color:#53657a;

}



/* =========================
MOVING TRUST BAR
========================= */


.trust-bar{

background:#0066ff;

color:white;

overflow:hidden;

padding:25px 0;

}



.trust-track{

display:flex;

width:max-content;

animation:trustMove 25s linear infinite;

}



.trust-item{

font-weight:600;

font-size:18px;

white-space:nowrap;

padding:0 60px;

}



@keyframes trustMove{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}


/* =========================
SERVICE SECTIONS
========================= */


.grid{

display:grid;

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

gap:40px;

margin-top:50px;

}



.card{

padding:30px;

background:white;

border-left:4px solid #0066ff;

transition:.3s;

}



.card:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(0,0,0,.08);

}



/* =========================
IMAGES
========================= */


img{

max-width:100%;

border-radius:20px;

transition:.3s;

}



img:hover{

transform:scale(1.03);

}



/* =========================
CONTACT
========================= */


form{

max-width:650px;

margin:40px auto;

}



input,
textarea{

width:100%;

padding:15px;

margin-bottom:15px;

border-radius:10px;

border:1px solid #d5dce5;

font-size:16px;

}




/* =========================
CTA
========================= */


.final-cta{

background:#07182b;

text-align:center;

color:white;

}



.final-cta h2{

color:white;

}



.final-cta p{

color:#d8e3ef;

}



/* =========================
FOOTER
========================= */


.footer{

background:#050f1c;

color:#cbd5e1;

padding:70px;

}



.footer-grid{

display:grid;

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

gap:40px;

text-align:center;

}



.footer a{

display:block;

margin-top:10px;

color:#cbd5e1;

text-decoration:none;

}



.footer a:hover{

color:white;

}



.footer-bottom{

text-align:center;

margin-top:40px;

font-size:14px;

}



/* =========================
MOBILE NAV
========================= */


.menu{

display:none;

font-size:30px;

color:white;

cursor:pointer;

}



@media(max-width:768px){



.navbar{

padding:18px 25px;

}



.menu{

display:block;

}



nav{

display:none;

position:absolute;

right:15px;

top:75px;

width:300px;

background:#07182b;

padding:20px;

border-radius:15px;

flex-direction:column;

gap:8px;

}



nav.active{

display:flex;

}



nav>a,
.dropdown>a{

width:100%;

padding:15px;

display:block;

}



.dropdown{

width:100%;

}



.dropdown-content{

position:static;

display:none;

width:100%;

margin-top:8px;

background:#102033;

box-shadow:none;

}



.dropdown.active .dropdown-content{

display:block;

}



.dropdown-content a{

padding:14px;

font-size:15px;

white-space:normal;

}



.hero{

flex-direction:column;

text-align:center;

padding:90px 25px;

}



.hero h1{

font-size:40px;

}



.grid{

grid-template-columns:1fr;

}



section{

padding:70px 25px;

}



.footer{

padding:50px 25px;

}



.footer-grid{

grid-template-columns:1fr;

}



}

/* =========================
SCROLL REVEAL ANIMATION
========================= */

.fade {

opacity: 0;

transform: translateY(40px);

transition: opacity 0.8s ease, transform 0.8s ease;

}



.fade.show {

opacity: 1;

transform: translateY(0);

}