:root {
    --bg: #0f0f0f;
    --text: #e6e6e6;
    --gold: #d3b76d;
    --header-height: 80px;
}

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

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

/* Preloader */
#preloader {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.loader {
    width: 60px; height: 60px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { 0% { transform: rotate(0deg);} 100% {transform: rotate(360deg);} }

/* Scrollbar */
::-webkit-scrollbar { width:12px; }
::-webkit-scrollbar-track { background:#1a1a1a; border-radius:10px;}
::-webkit-scrollbar-thumb { background: var(--gold); border-radius:10px; border:3px solid #1a1a1a;}

/* Navbar */
.header {
    position: fixed;
    top:0; left:0;
    width:100%;
    z-index:1000;
}

.navbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 40px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.logo img { max-height: 100px; transition:0.3s ease; }
.logo img:hover { transform: scale(1.05); }

.nav-links {
    display:flex;
    gap:25px;
    list-style:none;
}

.nav-links a {
    color:white;
    text-decoration:none;
    font-weight:500;
    position:relative;
    transition:0.3s ease;
}

.nav-links a.active { color: var(--gold); }

.nav-links a::after {
    content:'';
    position:absolute;
    left:0; bottom:-5px;
    width:0; height:2px;
    background: var(--gold);
    transition: width 0.3s ease;
}

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

.social-icons { display:flex; gap:15px; }
.social-icons a { color:white; font-size:18px; transition:0.2s ease; }
.social-icons a:hover { color: var(--gold); transform: translateY(-2px); }

.burger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.burger span {
    width: 25px;
    height: 3px;
    background: white;
    transition: 0.3s ease;
}

/* MOBILE */
@media (max-width: 768px) {

    .nav-links {
        position: fixed;
        top: 80px;
        right: -100%;
        height: calc(100vh - 80px);
        width: 250px;
        background: rgba(0,0,0,0.95);
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: 40px;
        gap: 25px;
        transition: right 0.4s ease;
    }

    .nav-links.active {
        right: 0;
    }

    .social-icons {
        display: none; /* optional */
    }

    .burger {
        display: flex;
    }

    .burger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .burger.active span:nth-child(2) {
        opacity: 0;
    }

    .burger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
}

/* Header */
.about-header {
    margin-top: calc(var(--header-height) + 60px);
    text-align:center;
    margin-bottom:50px;
}

.about-header h2 {
    font-size: 3rem;
    color:white;
}

.gold-line {
    width:120px; height:3px;
    background: var(--gold);
    margin:10px auto 0;
}

/* About content */
.about-wrapper {
    width:85%;
    margin: 0 auto 80px auto;
    padding:40px;
    background: rgba(255,255,255,0.05);
    border-radius:12px;
}

.about-row {
    display:flex;
    align-items:center;
    gap:40px;
    margin-bottom:60px;
}

.about-row img {
    width:100%;
    max-width:380px;
    border-radius:12px;
}

.about-text {
    flex:1;
}

.reverse { flex-direction: row-reverse; }

/* Mobile responsiveness */
@media (max-width:900px){
    .about-wrapper { width:95%; padding:20px; }
    .about-row { flex-direction:column; text-align:center; }
    .reverse { flex-direction:column; }
    .about-row img { max-width:100%; margin-bottom:20px; }
}