/* Common CSS for Header and Footer */

/* Font Face Definition */
@font-face {
            font-display: swap;
            font-family: wf_f4540b01f63f47e8b4ee94af2;
            src: url("/static/font/file.woff2") format("woff2"),
                url("/static/font/file.woff") format("woff"),
                url("/static/font/file.ttf") format("ttf");
        }

        @font-face {
            font-family: 'din-next-w01-light';
            font-style: normal;
            font-weight: 400;
            src: url('/static/font/din-next-w10-light.woff2') format('woff2');
            unicode-range: U+0401-040C, U+040E-044F, U+0451-045C, U+045E-045F, U+0490-0491, U+2116;
            font-display: swap;
        }

        @font-face {
            font-family: 'din-next-w01-light';
            font-style: normal;
            font-weight: 400;
            src: url('/static/font/din-next-w02-light.woff2') format('woff2');
            unicode-range: U+000D, U+0100-010F, U+0111-0130, U+0132-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+01FA-01FF, U+0218-021B, U+0237, U+02C9, U+02D8-02D9, U+02DB, U+02DD, U+0394, U+03A9, U+03C0, U+1E80-1E85, U+1EF2-1EF3, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2126, U+212E, U+2153-2154, U+215B-215E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
            font-display: swap;
        }

        @font-face {
            font-family: 'din-next-w01-light';
            font-style: normal;
            font-weight: 400;
            src: url('/static/font/din-next-w01-light.woff2') format('woff2');
            unicode-range: U+0020-007E, U+00A0-00FF, U+0110, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+0192, U+02C6-02C7, U+02DA, U+02DC, U+03BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122;
            font-display: swap;
        }

        @font-face {
            font-family: 'avenir-lt-w01_35-light1475496';
            font-style: normal;
            font-weight: 400;
            src: url('/static/font/avenir-lt-w05_35-light.woff2') format('woff2');
            unicode-range: U+0100-012B, U+012E-0130, U+0132-0137, U+0139-0149, U+014C-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+0218-021B, U+02C9, U+02D8-02D9, U+02DB, U+02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E9E, U+20B9-20BA, U+20BC-20BD, U+2113, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB01-FB02;
            font-display: swap;
        }

        @font-face {
            font-family: 'avenir-lt-w01_35-light1475496';
            font-style: normal;
            font-weight: 400;
            src: url('/static/font/avenir-lt-w01_35-light1475496.woff2') format('woff2');
            unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+0192, U+0237, U+02C6-02C7, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122;
            font-display: swap;
        }

        @font-face {
            font-display: swap;
            font-family: wf_bd3d420f8e9c46e4a074b5387;
            src: url("/static/font/file2.woff2") format("woff2"), url("/static/font/file2.woff") format("woff"), url("/static/font/file2.ttf") format("ttf");
        }

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 71px;
    background: transparent;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.header-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

/* Title Section - Desktop */
.title-section {
    width: 310px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    flex-shrink: 0;
}

.site-title {
    font: normal normal normal 30px/1.4em 'CustomFont', wfont_8f2fbf_bd3d420f8e9c46e4a074b53872c81dda, wf_bd3d420f8e9c46e4a074b5387, orig_jalnan_2_ttf, sans-serif;
    color: #917151;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 60px;
    margin: 0;
    padding: 0;
}

.nav-link {
    font: normal normal normal 16px/1.6em avenir-lt-w01_35-light1475496, sans-serif;
    color: #818181;
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.nav-link:hover {
    color: #917151;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-menu-btn span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #333;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 692px;
    height: 100vh;
    background: #0A151C;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1001;
    padding: 80px 20px 20px;
}

/* Mobile Nav Close Button */
.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
}

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

.mobile-nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    margin-top: 100px;
}

.mobile-nav-link {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    padding: 0;
    transition: color 0.3s ease;
    border-bottom: 1px solid #fff;
    width: 100%;
    text-align: center;
}

.mobile-nav-link:last-child {
    border-bottom: none;
}

.mobile-nav-link:hover {
    color: #917151;
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.mobile-overlay.active {
    display: block;
}

/* Footer Styles */
.footer {
    background: #0A151C;
    padding: 100px 0 20px 0;
    margin-top: auto;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Footer Title */
.footer-title {
    font: normal normal normal 17px/1.4em wfont_743b79_f4540b01f63f47e8b4ee94af210f4e50,wf_f4540b01f63f47e8b4ee94af2,orig_youandimodern_headregular;
    color: rgb(145, 113, 81);
    letter-spacing: 0.35em;
    text-align: center;
    margin-bottom: 60px;
}

/* Footer Contact Section */
.footer-contact {
    display: flex;
    justify-content: center;
    margin-bottom: 120px;
}

.contact-section {
    position: relative;
    padding: 0 30px;
}

.contact-section:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 40px;
    background-color: rgb(145, 113, 81);
}

.contact-link {
    text-decoration: none;
    color: #575757;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: rgb(145, 113, 81);
}

.contact-line {
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

/* Footer Copyright */
.footer-copyright {
    font: normal normal normal 15px/1.4em avenir-lt-w01_35-light1475496, sans-serif;
    color: rgb(87, 87, 87);
    text-align: center;
    margin-bottom: 20px;
}

/* Footer Social Media */
.footer-social {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.footer-social .social-icon {
    display: block;
}

.footer-social .social-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header {
        position: relative;
        height: 60px;
    }
    
    .header-container {
        padding: 0 15px;
    }
    
    .title-section {
        width: auto;
        justify-content: flex-start;
    }
    
    .site-title {
        font-size: 24px;
    }
    
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .mobile-nav {
        display: block;
    }
    
    .main-content {
        margin-top: 0;
    }
    
    /* Footer Mobile Styles */
    .footer {
        padding-top: 55px;
    }
    
    .footer-contact {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 50px;
    }
    
    .contact-section {
        padding: 0;
    }
    
    .contact-section:not(:last-child)::after {
        display: none;
    }
    
    .contact-section:not(:last-child) {
        border-bottom: 1px solid rgb(145, 113, 81);
        padding-bottom: 15px;
    }
    
    .footer-title {
        font-size: 16px;
        letter-spacing: 0.2em;
        margin-bottom: 20px;
    }
    
    .footer-copyright {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .footer-social {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .site-title {
        font-size: 20px;
    }
}

/* Mobile nav width adjustment for smaller screens */
@media (max-width: 692px) {
    .mobile-nav {
        width: 80vw;
    }
}

/* Ensure consistent spacing on all screen sizes */
@media (min-width: 769px) {
    .header-container {
        padding-left: 0;
        padding-right: 0;
    }
    
    .title-section {
        width: 310px;
        margin-left: 0;
        flex-shrink: 0;
    }
    
    .desktop-nav {
        margin-right: 50px;
        flex-shrink: 0;
    }
    
    .nav-menu {
        margin-right: 0;
    }
}

/* Main Content Area */
.main-content {
    /* min-height: calc(100vh - 140px); */
    padding-top: 71px;
    background: #fff;
}

@media (max-width: 768px) {
    .main-content {
        padding-top: 0;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Right Sidebar Styles */
.right-sidebar {
    position: fixed;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 999;
    background: transparent;
    display: none;
}

.social-icons {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.social-icon {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}

.social-icon:hover {
    transform: scale(1.1);
    opacity: 1;
}

.social-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Show right sidebar only on desktop */
@media (min-width: 769px) {
    .right-sidebar {
        display: block;
    }
}

/* Adjust position for larger screens */
@media (min-width: 1200px) {
    .right-sidebar {
        right: 15px;
    }
}