/* ===============================
   Global
=================================*/

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

body{

    font-family: "Segoe UI", Helvetica, Arial, sans-serif;

    color:#333;

    line-height:1.7;

    background:#fafafa;

}

.container{

    width:90%;

    max-width:1150px;

    margin:auto;

}

/* ===============================
   Header
=================================*/

.navbar{

    position:sticky;

    top:0;

    z-index:1000;

    background:white;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    text-decoration:none;

    font-size:1.7rem;

    font-weight:700;

    color:#0B2545;

}

.nav-links{

    list-style:none;

    display:flex;

    gap:30px;

}

.nav-links a{

    text-decoration:none;

    color:#444;

    font-weight:500;

    transition:.25s;

}

.nav-links a:hover{

    color:#0066cc;

}

.nav-links a:after{

    content:"";

    display:block;

    width:0;

    height:2px;

    background:#0066cc;

    transition:.3s;

}

.nav-links a:hover:after{

    width:100%;

}
.nav-links a.active {
    color: #0066cc;
    font-weight: 600;
}

.nav-links a.active::after {
    width: 100%;
}

/* ===============================
   Footer
=================================*/

.footer{

    margin-top:80px;

    background:#0B2545;

    color:white;

    text-align:center;

    padding:35px 0;

}

.footer p{

    margin:6px 0;

    opacity:.9;

}

/* ===============================
   Mobile
=================================*/

@media(max-width:850px){

.nav-container{

flex-direction:column;

gap:18px;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.logo{

font-size:1.5rem;

}

}

.hero{
    padding:70px 0;
}

.hero-container{

    max-width:1150px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:60px;

    padding:0 30px;

    flex-wrap:wrap;

}

.hero-image{

    flex:0 0 190px;

}

.hero-image img{

    width:190px;

    height:190px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #0B2545;

    box-shadow:0 10px 35px rgba(0,0,0,.18);

}

.hero-content{

    flex:1;

    min-width:300px;

}

.hero-content h1{

    margin:0;

    font-size:3rem;

    font-weight:700;

}

.hero-content h2{

    margin-top:8px;

    color:#0B2545;

    font-weight:500;

}

.hero-university{

    margin-top:15px;

    color:#666;

    font-size:1.05rem;

}

.hero-description{

    margin-top:25px;

    line-height:1.8;

    max-width:750px;

}

.hero-tags{

    margin-top:20px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.hero-tags span{

    background:#eef4ff;

    color:#0B2545;

    padding:8px 15px;

    border-radius:20px;

    font-size:.9rem;

    font-weight:600;

}

.hero-buttons{

    margin-top:30px;

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.btn{

    background:#0B2545;

    color:white;

    padding:12px 22px;

    border-radius:8px;

    text-decoration:none;

    transition:.3s;

}

.btn:hover{

    background:#1f4e8c;

}

@media(max-width:900px){

.hero-container{

flex-direction:column;

text-align:center;

}

.hero-content{

max-width:100%;

}

.hero-description{

margin-left:auto;

margin-right:auto;

}

.hero-tags{

justify-content:center;

}

.hero-buttons{

justify-content:center;

}

}

/* ======================================
   404 Page
====================================== */

.error-page {

    max-width: 700px;

    margin: 80px auto;

    text-align: center;

    padding: 30px;

}

.error-page h1 {

    font-size: 7rem;

    color: #0B2545;

    margin-bottom: 10px;

}

.error-page h2 {

    font-size: 2rem;

    margin-bottom: 20px;

}

.error-page p {

    font-size: 1.1rem;

    color: #555;

    line-height: 1.8;

}

.error-buttons {

    margin: 40px 0;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}

.error-buttons .btn {

    padding: 12px 22px;

    text-decoration: none;

    border-radius: 8px;

    background: #0B2545;

    color: white;

    transition: .25s;

}

.error-buttons .btn:hover {

    background: #1565c0;

}

.small-text {

    margin-top: 25px;

    color: #777;

    font-size: .95rem;

}