*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Arial,sans-serif;

}

body{

background:#f5f7fa;

color:#222;

line-height:1.7;

}

.hero{

height:100vh;

background:

linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),

url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=1600&auto=format&fit=crop');

background-size:cover;

background-position:center;

color:white;

}

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 50px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    z-index: 1000;
}

.container{

max-width:1200px;

margin:auto;

padding:0 30px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{
    display: flex;
    align-items: center;
    gap: 15px;
}

}

.logo-img{

height:85px;

width:auto;

background:transparent;

}

.brand-text{

display:flex;

flex-direction:column;

line-height:1.2;

}

.brand-name{

font-size:34px;

font-weight:800;

letter-spacing:3px;

color:white;

}

.tagline{

font-size:13px;

color:#dbe7f5;

letter-spacing:2px;

text-transform:uppercase;

margin-top:3px;

}

.nav ul{
    display: flex;
    list-style: none;
    gap: 30px;
}

}

.nav a{
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
}

}

.nav a:hover{

color:#4da6ff;

}

.hero-content{

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:0 20px;

}

.hero-content h1{

font-size:64px;

font-weight:800;

max-width:950px;

margin-bottom:20px;

line-height:1.2;

}

.hero-content p{

font-size:24px;

margin-bottom:35px;

color:#e5e5e5;

}

.btn{

display:inline-block;

background:#007bff;

color:white;

padding:15px 35px;

border-radius:6px;

text-decoration:none;

font-weight:700;

transition:0.3s;

}

.btn:hover{

background:#0056b3;

transform:translateY(-2px);

}

.section{

padding:100px 20px;

max-width:1200px;

margin:auto;

}

.section h2{

font-size:42px;

margin-bottom:30px;

text-align:center;

color:#002244;

}

.section p{

font-size:18px;

text-align:center;

max-width:900px;

margin:auto;

}

.dark-section{

background:#0b1726;

color:white;

padding:100px 20px;

}

.dark-section h2{

text-align:center;

font-size:42px;

margin-bottom:50px;

}

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

max-width:1200px;

margin:auto;

}

.card{

background:white;

color:#222;

padding:35px;

border-radius:10px;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

transition:0.3s;

}

.card:hover{

transform:translateY(-8px);

}

.card h3{

margin-bottom:15px;

color:#003366;

font-size:24px;

}

footer{

background:#001122;

color:white;

text-align:center;

padding:30px;

font-size:15px;

}

@media(max-width:900px){

.container{

flex-direction:column;

gap:20px;

}

.nav ul{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.hero-content h1{

font-size:42px;

}

.hero-content p{

font-size:18px;

}

.brand-name{

font-size:26px;

}

.logo-img{

height:70px;

}

}