/* --- Global Reset & Variables --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #FA5C01;
    --secondary-color: #FAFAFA;
    --third-color: #D5D1C8;
    --fourth-color: #675845;
    --fifth-color: #000000;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    background-color: #ffffff;
    line-height: 1.5;
}

/* --- Typography --- */
@font-face {
    font-family: 'gondens';
    /* Step out of /css/ then into /fonts/ */
    src: url('/fonts/gondens-demo/gondensdemo.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Telegraf Regular';
    font-style: normal;
    font-weight: normal;
    /* Step out of /css/ then into /fonts/ */
    src: url('/fonts/telegraf-webfont/TelegrafRegular_272984568a25d8528fe2de8b20b29011.woff') format('woff');
}

h2 {

    font-family: "gondens";
 
    font-size: 2.5rem;
    margin-bottom: 15px;
    line-height: 2;
}

p {
    font-family: 'Telegraf Regular', Arial, sans-serif;
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}

/* Also add this to your existing mobile media query */
@media (max-width: 768px) {
    .nav-links {
        /* ... your existing code ... */
        visibility: hidden; /* Hide it from screen readers/pointers when closed */
        pointer-events: none; /* Prevents accidental clicks while off-screen */
    }
}

    .nav-links.active {
        visibility: visible;
        pointer-events: auto;
        right: 0 !important;
    }


/* --- Navbar Base --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: var(--secondary-color); /* Match your boutique theme */
    position: relative;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    height: 100px; /* Adjust based on your GIF size */
    width: auto;
}

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

.nav-links a {
    text-decoration: none;
    color: var(--fifth-color);
    font-weight: 500;
    font-family: 'Telegraf Regular';
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.6;
}

/* --- Hamburger Icon --- */
.hamburger {
    display: none; /* Hidden on Desktop */
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1002;
}

.bar {
    width: 28px;
    height: 2px;
    background-color: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
    /* Prevent scrolling background */
    body.no-scroll {
        overflow: hidden;
        height: 100vh;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 8px; /* The space between your two bars */
        z-index: 2005; 
        position: relative;
    }

    /* THE TWO-BAR X */
    /* Bar 1 moves down half the gap + bar height to center */
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }
    /* Bar 2 moves up half the gap + bar height to center */
    .hamburger.active .bar:nth-child(2) {
        transform: translateY(-5px) rotate(-45deg);
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 100%;  
        height: 100vh; 
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

/* --- Fundamentals Full-Screen Section --- */
.fundamentals {
    width: 100%;
    height: 100vh; /* Exactly 100% of the viewport height */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents image overflow */
}

.fundamentals div {
    width: 100%;
    height: 100%;
}

.fundamentals img {
    /* This is the secret: it fills the space without stretching the aspect ratio */
    object-fit: cover; 
    display: block;
    /* Optional: If you want to ensure it stays centered if the screen is wide */
    object-position: center; 
    max-width: 100%;
  height: auto;
  display: block;
}
.btn-glass {
    display: inline-block;
    padding: 14px 35px;
    background: rgba(255, 255, 255, 0.1); /* Transparent white */
    color: var(--third-color);
    font-family: 'Telegraf Regular', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 3px;
    font-size: 13px;
    border: 1px solid var(--third-color);
    border-radius: 25px;
    backdrop-filter: blur(8px); /* The "Glass" effect */
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.4s ease;
    cursor: pointer;
    position: absolute;
    bottom: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
}

.btn-glass:hover {
    background: white;
    color: black;
    border-color: white;
    letter-spacing: 5px; /* Subtle expansion effect */
}

.full-image-container {
    position: relative; /* Ensure positioning context for the button */
    width: 100%;
    height: 100%;
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}
.btn-action {
    display: inline-block;
    padding: 10px 28px; /* Smaller, balanced padding */
    background-color: transparent;
    color: var(--fifth-color); /* Black */
    font-family: 'Telegraf Regular', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 11px; /* Smaller, chic text size */
    border: 1px solid #e0e0e0; /* Subtle light border */
    border-radius: 50px; /* Elegant pill shape */
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    margin-top: 15px;
}

/* The Background Fill Effect */
.btn-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--fifth-color); /* Black background on hover */
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

/* Hover State */
.btn-action:hover {
    color: #ffffff; /* Text turns white */
    border-color: var(--fifth-color);
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.btn-action:hover::before {
    width: 100%; /* Fill expands across */
}

/* Active/Click State */
.btn-action:active {
    transform: translateY(0);
}
/* Remove any potential padding from parent containers if they exist */
section {
    max-width: 100vw !important;
}

/* --- Section Layouts (Alternating) --- */
.brand, .concepts {
    width: 100%;
    padding: 10px 0; /* Creates slight gap between sections */
}

.brand-container, .concepts-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
}

/* Row-Reverse for "Concepts" sections to put Image on Left */
.concepts-container {
    flex-direction: row-reverse;
}

.brand-content, .concepts-content {
    flex: 1;
    background-color: #ffffff;
    padding: 60px 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-image {
    flex: 1;
    display: flex; /* Ensures the container behaves predictably */
}

.hero-image img {
    width: 100%;
    /* Set a fixed height or use aspect-ratio for consistency */

    object-fit: cover; /* This crops the image to fill the space without stretching */
    object-position: center; /* Keeps the focus in the middle */
    border-radius: 20px;
    display: block;
}

/* On mobile, let's make the height a bit shorter so it doesn't take up the whole screen */
@media (max-width: 768px) {
    .hero-image img {
        height: 300px;
    }
}
/* --- Mobile Navigation --- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 2005;
}

.bar {
    width: 28px;
    height: 2px;
    background-color: #000;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .hamburger { display: flex; }

    /* X Animation */
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(2) { transform: translateY(0px) rotate(-45deg); }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        visibility: hidden;
        pointer-events: none;
    }

    .nav-links.active {
        right: 0;
        visibility: visible;
        pointer-events: auto;
    }

    /* Stacking sections on mobile */
    .brand-container, .concepts-container {
        flex-direction: column;
    }

    .hero-image {
        order: -1; /* Image always on top for mobile */
    }

    .brand-content, .concepts-content {
        padding: 40px 20px;
    }
}



.main-footer {
    padding: 80px 20px;
    background-color: var(--third-color); /* The exact cream/beige from your screenshot */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Perfect vertical spacing */
}

/* --- Social & Email Icons --- */
.footer-socials {
    display: flex;
    gap: 15px; /* Spacing between the icons */
    font-size: 3rem; /* Size of the icons */
}
/* Force icons to have a size and color */

.footer-socials a {
    color: var(--secondary-color); /* Dark muted brown/gray from the image */
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Subtle hover effect for a premium feel */
.footer-socials a:hover {
    opacity: 0.7;
    transform: translateY(-3px);
}

/* --- Typography & Copyright --- */
.footer-content {
    font-family: 'gondens'; /* Clean, modern sans-serif */
    color: var(--secondary-color); /* Soft gray for the copyright text */
    font-size: 0.85rem;
    letter-spacing: 0.3px; /* Slight spacing for readability */
    line-height: 1.6;
}
.footer-title {
    color: var(--secondary-color);
}

.footer-content p {
    color: var(--secondary-color);
    margin: 0;
}

/* If you add privacy links later, this handles their styling */
.footer-content a {
    color: var(--secondary-color);
    text-decoration: underline;
    transition: color 0.3s;
}

.footer-content a:hover {
    color: var(--secondary-color);
}