:root {

    /* Colors */
    --primary-color: #c9a96e;
    --secondary-color: #111111;
    --white-color: #ffffff;
    --light-color: #f5f5f5;
    --text-color: #666666;
    --border-color: #e5e5e5;

    /* Typography */
    --heading-font: 'Libre Baskerville', serif;
    --body-font: 'Work Sans', sans-serif;

    /* Font Sizes */
    --fs-h1: 64px;
    --fs-h2: 48px;
    --fs-h3: 32px;
    --fs-h4: 24px;
    --fs-body: 16px;

    /* Font Weight */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Spacing */
    --space-xs: 10px;
    --space-sm: 20px;
    --space-md: 40px;
    --space-lg: 60px;
    --space-xl: 100px;

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 20px;

    /* Transition */
    --transition: all 0.4s ease;

}

body{
    margin:0;
    padding:0;
    font-family: var(--body-font);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: 1.7;
    color: var(--text-color);
    background: var(--light-color);
}

h1,h2,h3,h4,h5,h6{
    margin:0;
    font-family: var(--heading-font);
    color: var(--secondary-color);
    line-height: 1.2;
}

a{
    text-decoration:none;
    transition: var(--transition);
}

/*
========================
HEADER
========================
*/

.custom-navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 24px 0;
    transition: var(--transition);
    background: transparent;
}

.custom-navbar.scrolled{
    background: rgba(17,17,17,0.95);
    backdrop-filter: blur(10px);
    padding: 18px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.navbar-brand{
    color: var(--white-color);
    font-size: 30px;
    font-family: var(--heading-font);
    font-weight: var(--fw-bold);
}

.navbar-brand:hover{
    color: var(--white-color);
}

.navbar-nav{
    align-items: center;
    gap: 10px;
}

.nav-link{
    color: var(--white-color);
    font-size: 15px;
    font-weight: var(--fw-medium);
    position: relative;
    padding: 8px 16px !important;
}

.nav-link::after{
    content: '';
    position: absolute;
    left: 16px;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--primary-color);
    transition: var(--transition);
}

.nav-link:hover{
    color: var(--primary-color);
}

.nav-link:hover::after{
    width: calc(100% - 32px);
}

/* Mobile Toggle */

.navbar-toggler{
    border: none;
    box-shadow: none !important;
    padding: 0;
}

.custom-toggler{
    width: 30px;
    height: 2px;
    background: var(--white-color);
    display: block;
    position: relative;
}

.custom-toggler::before,
.custom-toggler::after{
    content: '';
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--white-color);
}

.custom-toggler::before{
    top: -8px;
}

.custom-toggler::after{
    top: 8px;
}

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

.hero-section{
    position: relative;
    min-height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?q=80&w=1974&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-content{
    max-width: 850px;
}

.hero-content h1{
    font-size: var(--fs-h1);
    color: var(--white-color);
    margin-bottom: 24px;
}

.hero-content p{
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 40px;
    max-width: 650px;
}

.hero-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    background: var(--primary-color);
    color: var(--secondary-color);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: var(--fw-semibold);
}

.hero-btn:hover{
    background: var(--white-color);
    color: var(--secondary-color);
}