/* ===================================================
   COMMON.CSS — variables, reset, navbar, footer, buttons
   Loaded on every page.
=================================================== */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --header-height: 5rem;
    --main-color: rgba(18, 18, 18, 0.8);
    --first-color: #d4af37;
    /* Gold */
    --second-color: #a8a8a8;
    /* Grey */
    --white-color: #fff;
    --black-color: #000;

    --font-cursive: 'Great Vibes', cursive;
    --font-body: 'Montserrat', sans-serif;

    --big-font-size: 3rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.813rem;

    --glass-bg: rgba(28, 28, 32, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.05);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    outline: none;
    border: none;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--black-color);
    font-size: var(--normal-font-size);
    font-family: var(--font-body);
    overflow-x: hidden;
    color: var(--white-color);
}

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

/* ---------- Shared section title style ---------- */
.section-title {
    margin: 0 auto;
    text-align: center;
    animation: fadeInUp 1s ease-out;
}

.section-title h1 {
    font-family: var(--font-cursive);
    font-size: var(--big-font-size);
    font-weight: 400;
    line-height: 3rem;
    color: var(--first-color);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.section-title span {
    font-weight: 300;
    font-size: var(--h2-font-size);
    line-height: 1.5rem;
    color: var(--white-color);
    letter-spacing: 2px;
}

/* ---------- Buttons ---------- */
.btn {
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--first-color);
    color: var(--black-color);
    border: 1px solid var(--first-color);
    border-radius: 50px;
    font-size: var(--normal-font-size);
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1rem;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.btn:hover {
    background-color: transparent;
    color: var(--first-color);
}

/* ===================================================
   NAVBAR
=================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: rgba(28, 28, 28, 0.8);
    z-index: 100;
    transition: all 0.4s ease;
}

.navbar {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.navbar .logo {
    max-width: 160px;
    max-height: 3.5rem;
}

.navbar .logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nav-menu .nav-list {
    display: flex;
}

.nav-menu li {
    margin-right: 2rem;
}

.nav-link {
    font-size: var(--normal-font-size);
    color: var(--white-color);
    font-weight: bold;
    text-transform: capitalize;
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer;
}

.nav-link::before {
    content: '';
    position: absolute;
    width: 0;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--first-color);
    transition: all 0.4s ease-in-out;
}

.nav-link:hover:before {
    width: 100%;
}

.nav-link:hover,
.nav-link.active {
    color: var(--first-color);
}

.nav-toggle {
    font-size: var(--h1-font-size);
    padding: 5px 5px 0;
    border: 2px solid transparent;
    cursor: pointer;
    z-index: 100;
    display: none;
    color: var(--white-color);
}

.nav-toggle:hover {
    color: var(--first-color);
    border: 2px solid var(--first-color);
}

@media(max-width:920px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 0;
        height: 100vh;
        background-color: rgba(28, 28, 28, 0.97);
        font-size: var(--h2-font-size);
        text-align: center;
        text-transform: capitalize;
        padding-top: var(--header-height);
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
        transition: all 0.4s ease-in-out;
        overflow: hidden;
    }

    .nav-menu.show-nav {
        width: 65%;
    }

    .nav-menu .nav-list {
        display: block;
    }

    .nav-menu li {
        padding: 15px 0;
    }

    .nav-link {
        font-size: var(--h3-font-size);
    }

    .nav-toggle {
        display: block;
    }
}

/* ===================================================
   PREMIUM DUAL-BRAND FOOTER
=================================================== */
.footer{position:relative;overflow:hidden;padding:4.5rem 0 0;background:linear-gradient(180deg,rgba(5,5,5,.98),#000)}
.footer .background-shapes{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.footer .shape{position:absolute;border-radius:50%;filter:blur(70px)}
.footer .shape-1{width:460px;height:460px;background:radial-gradient(circle,rgba(212,175,55,.10),transparent 70%);top:-80px;right:-180px;animation:float 20s ease-in-out infinite}
.footer .shape-2{width:380px;height:380px;background:radial-gradient(circle,rgba(212,175,55,.08),transparent 70%);bottom:-100px;left:-130px;animation:float 18s ease-in-out infinite reverse}
.footer-inner{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 2rem}
.footer-brand-row{display:flex;align-items:center;justify-content:center;gap:38px;min-height:180px}
.footer-brand-logo{display:flex;align-items:center;justify-content:center;transition:transform .45s ease,filter .45s ease}
.footer-brand-logo:hover{transform:translateY(-5px) scale(1.025);filter:drop-shadow(0 0 18px rgba(212,175,55,.16))}
.threading-brand img{width:min(315px,32vw);height:auto;display:block}
.elite-brand img{width:min(290px,30vw);max-height:150px;object-fit:contain;display:block}
.footer-logo-pipe{height:118px;width:1px;position:relative;background:linear-gradient(180deg,transparent,rgba(212,175,55,.82) 20%,rgba(212,175,55,.82) 80%,transparent);box-shadow:0 0 13px rgba(212,175,55,.16)}
.footer-logo-pipe span{position:absolute;width:7px;height:7px;border:1px solid var(--first-color);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:#050505;box-shadow:0 0 0 5px rgba(212,175,55,.06)}
.footer-social-row{display:flex;justify-content:center;gap:12px;margin-top:.2rem}
.footer-social-row a{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;color:var(--first-color);border:1px solid rgba(212,175,55,.35);background:rgba(212,175,55,.035);transition:transform .35s ease,background .35s ease,color .35s ease,box-shadow .35s ease}
.footer-social-row a:hover{transform:translateY(-5px) rotate(4deg);background:var(--first-color);color:#050505;box-shadow:0 10px 24px rgba(212,175,55,.18)}
.footer-divider{height:1px;margin:2.4rem auto 0;background:linear-gradient(90deg,transparent,rgba(212,175,55,.5),transparent)}
.footer-list{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:3.2rem 0;border-bottom:1px solid rgba(212,175,55,.24);align-items:stretch}
.footer-data{text-align:center;padding:1.6rem 1.1rem;border-radius:20px;border:1px solid transparent;transition:transform .35s ease,border-color .35s ease,background .35s ease}
.footer-data:hover{transform:translateY(-5px);border-color:rgba(212,175,55,.18);background:rgba(255,255,255,.018)}
.footer-icon{width:42px;height:42px;margin:0 auto .9rem;border-radius:50%;display:grid;place-items:center;color:var(--first-color);background:rgba(212,175,55,.07);border:1px solid rgba(212,175,55,.19)}
.footer-data h2{font-weight:600;font-size:1rem;line-height:1.3;color:var(--first-color);margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.12em}
.footer-data p{font-weight:400;line-height:1.75;text-align:center;color:rgba(255,255,255,.74);font-size:.9rem;margin:.14rem 0}
.footer-data a.footer-link{color:rgba(255,255,255,.78);transition:color .25s ease}
.footer-data a.footer-link:hover{color:var(--first-color)}
.footer .copy{text-align:center;padding:1.35rem 0 2rem}
.footer .copy p{font-weight:500;line-height:1.5;color:rgba(255,255,255,.78);margin-bottom:.2rem}
.footer .copy span{font-size:var(--small-font-size);line-height:1rem;color:var(--second-color)}
.copy i{color:var(--first-color);font-size:var(--small-font-size)}
@media(max-width:900px){.footer-brand-row{gap:24px}.footer-list{grid-template-columns:repeat(2,1fr)}.footer-logo-pipe{height:90px}.threading-brand img{width:min(280px,38vw)}.elite-brand img{width:min(250px,36vw);max-height:120px}}
@media(max-width:560px){.footer{padding-top:3.3rem}.footer-inner{padding:0 1rem}.footer-brand-row{flex-direction:column;gap:18px;min-height:0}.footer-logo-pipe{width:78%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.82) 20%,rgba(212,175,55,.82) 80%,transparent)}.footer-logo-pipe span{top:50%;left:50%}.threading-brand img{width:min(290px,80vw)}.elite-brand img{width:min(270px,76vw);max-height:145px}.footer-list{grid-template-columns:1fr;gap:6px;padding:2.4rem 0}.footer-data{padding:1.25rem 1rem}}

/* ===================================================
   SHARED KEYFRAMES
=================================================== */
@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   PAGE HERO BANNER (used on inner pages instead of the
   full home hero, so inner pages stay lightweight)
=================================================== */
.page-banner {
    width: 100%;
    padding: 9rem 2rem 3rem;
    text-align: center;
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.page-banner h1 {
    font-family: var(--font-cursive);
    font-size: var(--big-font-size);
    color: var(--first-color);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.page-banner span {
    display: block;
    margin-top: 0.5rem;
    font-weight: 300;
    font-size: var(--h2-font-size);
    color: var(--white-color);
    letter-spacing: 2px;
}