* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: #080c0a;

    color: #e6e9e6;

    font-family: Arial, Helvetica, sans-serif;

    line-height: 1.6;

}



header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px 8%;

    background: #050706;

    border-bottom: 1px solid #27332b;

    position: sticky;

    top: 0;

    z-index: 100;

}




.logo {

    font-size: 22px;

    font-weight: bold;

    letter-spacing: 5px;

}





nav a {

    color: #bfc8c1;

    text-decoration: none;

    margin-left: 25px;

    font-size: 14px;

    letter-spacing: 2px;

}



nav a:hover {

    color: white;

}






.hero {

    min-height: 90vh;

    display: flex;

    align-items: center;

    padding: 8%;

    position: relative;

    overflow: hidden;

}





.hero-content {

    max-width: 800px;

    position: relative;

    z-index: 5;

}





.map-container {

    position: absolute;

    right: -5%;

    top: 15%;

    width: 70%;

    opacity: 0.25;

    z-index: 1;

}





.map-container img {

    width: 100%;

    animation: mapPulse 8s infinite;

}





@keyframes mapPulse {


0% {

opacity:0.3;

}


50% {

opacity:0.8;

}


100% {

opacity:0.3;

}


}






.tag {

    color:#9dac9d;

    font-size:13px;

    letter-spacing:4px;

}




h1 {

    font-size: clamp(45px, 7vw, 90px);

    line-height:1;

    letter-spacing:8px;

    margin:30px 0;

}





h2 {

    font-size:32px;

    letter-spacing:3px;

    border-left:4px solid #738878;

    padding-left:15px;

    margin-bottom:35px;

}





section {

    padding:80px 8%;

}





button {

    margin-top:30px;

    padding:15px 40px;

    background:transparent;

    border:1px solid #738878;

    color:white;

    cursor:pointer;

    letter-spacing:3px;

}





button:hover {

    background:#738878;

}





.panel {

    background:#101612;

    border:1px solid #27332b;

    padding:30px;

    margin-top:35px;

    letter-spacing:1px;

}





.panel span {

    color:#8fa58f;

}





.grid {

    display:grid;

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

    gap:25px;

}





.card {

    background:#101612;

    border:1px solid #27332b;

    padding:35px;

    min-height:250px;

}





.card span {

    font-size:42px;

    font-weight:bold;

    color:#8fa58f;

}





.card h3 {

    letter-spacing:2px;

}





.card p {

    color:#bcc5bd;

}






.timeline {

    display:grid;

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

    gap:20px;

}





.timeline div {

    background:#101612;

    border-left:3px solid #738878;

    padding:25px;

}






ul {

    padding:0;

    list-style:none;

}




li {

    background:#101612;

    border-bottom:1px solid #27332b;

    padding:15px;

}





footer {

    text-align:center;

    padding:40px;

    border-top:1px solid #27332b;

    color:#9aa59d;

}





@media(max-width:800px) {


header {

    flex-direction:column;

}


nav {

    margin-top:20px;

}


nav a {

    display:inline-block;

    margin:10px;

}


.map-container {

    width:100%;

    right:0;

    opacity:0.15;

}


h1 {

    letter-spacing:4px;

}


}