/* Start custom CSS for html, class: .elementor-element-57c5af3 */:root {
    --primary: #2e0505;
    --primary-light: #4e0909;
    --primary-dark: #1a0202;
    --accent: #c5a059;
    --accent-light: #e5c583;
    --accent-dark: #9a7833;
    --accent-gradient: linear-gradient(135deg, #c5a059 0%, #e6c875 50%, #9b7631 100%);
    --text-dark: #222222;
    --text-muted: #555555;
    --bg-light: #f8f5f0;
    --bg-cream: #faf6f0;
    --bg-white: #ffffff;
    --border-color: rgba(197, 160, 89, 0.25);
    --shadow-sm: 0 4px 15px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.13);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Outfit', 'Inter', sans-serif;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-body);
    line-height: 1.8;
    color: var(--text-dark);
    background-color: var(--bg-light);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Scroll Progress Bar */
.scroll-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: transparent; z-index: 1000; }
.scroll-progress-bar { height: 100%; background: var(--accent-gradient); width: 0%; transition: width 0.1s ease-out; }

/* Layout */
.container { max-width: 1320px; margin: 0 auto; padding: 0 30px; }

/* Hero */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(26,2,2,0.88), rgba(46,5,5,0.92)), url('https://silkkhazana.in/wp-content/uploads/2026/08/hero_gi_silkmark_guide.jpg') center/cover no-repeat;
    color: white;
    padding: 6rem 20px 7rem;
    border-bottom: 4px solid var(--accent);
}

.hero-meta-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 1.5rem; }
.meta-pill {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(197,160,89,0.4);
    backdrop-filter: blur(5px);
    color: var(--accent-light);
    padding: 0.4rem 1.1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.hero-subtitle { font-size: clamp(0.9rem,2vw,1.1rem); letter-spacing: clamp(3px,1.5vw,6px); font-weight:600; color:var(--accent); text-transform:uppercase; margin-bottom:1rem; }
.hero-title { font-size: clamp(2rem,5.5vw,4rem); font-family:var(--font-heading); font-weight:700; line-height:1.25; color:#fff; max-width:1000px; margin:0 auto 1.8rem; text-shadow:0 10px 30px rgba(0,0,0,0.7); }
.hero-description { font-size:clamp(1.05rem,2vw,1.25rem); font-style:italic; font-weight:300; max-width:850px; margin:0 auto 3rem; line-height:1.75; color:#f3e8d5; }
.hero-attribution { border-top:1px solid rgba(197,160,89,0.35); padding-top:1.8rem; margin-top:1.8rem; max-width:800px; margin-left:auto; margin-right:auto; }
.hero-attribution-title { font-size:clamp(1rem,2vw,1.2rem); font-weight:700; letter-spacing:2px; color:var(--accent); margin-bottom:0.4rem; text-transform:uppercase; }
.hero-attribution-text { font-size:clamp(0.85rem,1.8vw,0.98rem); color:#e5d8c0; line-height:1.6; }

/* Intro Callout */
.callout-box.intro-callout {
    background: #fff;
    border: 1px solid rgba(197,160,89,0.25);
    border-left: 6px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 2.5rem 3rem;
    box-shadow: var(--shadow-md);
    margin: -4rem 0 3rem;
    position: relative;
    z-index: 10;
}
.callout-box p { font-style:italic; font-size:1.2rem; color:var(--primary); line-height:1.8; margin-bottom:0; font-weight:400; }

/* Layout Grid */
.guide-layout { display:grid; grid-template-columns:280px 1fr; gap:3.5rem; margin-top:3.5rem; align-items:start; }

/* TOC Sidebar */
.toc-sidebar { position:sticky; top:20px; background:var(--bg-white); padding:1.8rem 1.5rem; border-radius:var(--radius-md); border:1px solid var(--border-color); box-shadow:var(--shadow-sm); max-height:calc(100vh - 40px); overflow-y:auto; }
.toc-header { display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-size:1.15rem; font-weight:700; color:var(--primary); padding-bottom:0.8rem; margin-bottom:1.2rem; border-bottom:2px solid var(--accent); }
.toc-list { list-style:none; }
.toc-item { margin-bottom:0.6rem; }
.toc-link { display:block; color:var(--text-muted); text-decoration:none; font-size:0.92rem; line-height:1.4; padding:0.4rem 0.6rem; border-radius:6px; transition:var(--transition); border-left:3px solid transparent; }
.toc-link:hover, .toc-link.active { color:var(--primary); background:rgba(197,160,89,0.12); border-left-color:var(--accent); font-weight:600; padding-left:0.8rem; }

/* Main Content */
.guide-content { min-width:0; }
.guide-section { margin-bottom:4.5rem; padding-bottom:1rem; }

.section-title { font-family:var(--font-heading); font-size:clamp(1.8rem,4vw,2.3rem); font-weight:700; color:var(--primary); margin-top:1.5rem; margin-bottom:2rem; border-left:5px solid var(--accent); padding-left:20px; line-height:1.35; }
h3.subsection-title { font-family:var(--font-heading); font-size:1.5rem; color:var(--primary); margin:2.2rem 0 1rem; font-weight:700; }
p { margin-bottom:1.6rem; font-size:1.1rem; color:var(--text-muted); line-height:1.85; }
p strong { color:var(--primary); font-weight:600; }
p a { color:var(--primary); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; font-weight:600; transition:var(--transition); }
p a:hover { color:var(--accent-dark); }

hr.section-divider { border:none; height:1px; background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%); margin:4rem 0; }

/* Content Grid */
.content-grid { display:grid; grid-template-areas:"text image"; grid-template-columns:1.2fr 0.8fr; gap:3.5rem; align-items:center; margin-bottom:3.5rem; }
.content-grid.reverse { grid-template-areas:"image text"; grid-template-columns:0.8fr 1.2fr; }
.text-block { grid-area:text; }
.image-block { grid-area:image; position:relative; overflow:hidden; border-radius:var(--radius-md); box-shadow:var(--shadow-md); background:var(--bg-white); border:1px solid var(--border-color); transition:var(--transition); }
.image-block img { width:100%; height:400px; object-fit:cover; display:block; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1); }
.image-block:hover img { transform:scale(1.05); }
.image-caption { background-color:var(--primary); color:#f5eedf; padding:0.9rem 1.2rem; font-size:0.92rem; text-align:center; font-style:italic; border-top:2px solid var(--accent); }

/* Table */
.table-container { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:2.5rem 0 3.5rem; border-radius:var(--radius-md); box-shadow:var(--shadow-md); border:1px solid var(--border-color); }
table { width:100%; min-width:560px; border-collapse:collapse; background-color:var(--bg-white); text-align:left; }
th, td { padding:1.2rem 1.4rem; border-bottom:1px solid #ede8e0; font-size:1rem; }
th { background-color:var(--primary); color:#fff; font-family:var(--font-heading); font-size:1.05rem; font-weight:700; letter-spacing:0.5px; }
tr:last-child td { border-bottom:none; }
tr:nth-child(even) td { background-color:var(--bg-cream); }
td strong { color:var(--primary); }
td.not-proves { color:#b91c1c; font-size:0.95rem; }

/* Feature Cards */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; margin:2.5rem 0; }
.feature-card { background:var(--bg-white); padding:2.2rem; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); border:1px solid var(--border-color); transition:var(--transition); border-bottom:4px solid transparent; position:relative; }
.feature-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-md); border-bottom-color:var(--accent); }
.feature-card .card-icon { font-size:2.2rem; margin-bottom:1rem; display:block; }
.feature-card h3 { font-family:var(--font-heading); margin-bottom:0.8rem; font-size:1.35rem; color:var(--primary); }
.feature-card p { font-size:0.98rem; margin-bottom:0; }
.feature-card .tag { display:inline-block; margin-top:0.8rem; font-size:0.78rem; font-weight:700; color:var(--accent-dark); background:rgba(197,160,89,0.15); border:1px solid var(--border-color); padding:0.2rem 0.7rem; border-radius:20px; text-transform:uppercase; letter-spacing:0.5px; }

/* Styled Lists */
.styled-list { list-style:none; margin:2rem 0; }
.styled-list li { position:relative; padding-left:2.2rem; margin-bottom:1.2rem; font-size:1.08rem; color:var(--text-muted); }
.styled-list li::before { content:"✦"; position:absolute; left:0; color:var(--accent); font-size:1.2rem; }

/* Step Cards */
.steps-container { margin:3rem 0; }
.step-item { background:var(--bg-white); padding:2.2rem; border-radius:var(--radius-md); margin-bottom:1.8rem; box-shadow:var(--shadow-sm); border:1px solid var(--border-color); display:flex; gap:2rem; align-items:flex-start; transition:var(--transition); }
.step-item:hover { box-shadow:var(--shadow-md); border-left:5px solid var(--accent); }
.step-number { background:var(--primary); color:var(--accent); font-family:var(--font-heading); font-size:2rem; font-weight:700; width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; border:2px solid var(--accent); }
.step-content h3 { font-family:var(--font-heading); margin-bottom:0.5rem; font-size:1.3rem; color:var(--primary); }
.step-content p { margin-bottom:0; font-size:1.03rem; }

/* Warning / Featured Box */
.featured-box { background:var(--bg-cream); border:1px solid rgba(197,160,89,0.3); border-left:6px solid var(--accent); padding:2.2rem; border-radius:var(--radius-sm); margin:2.5rem 0; box-shadow:var(--shadow-sm); }
.featured-box h4 { font-family:var(--font-heading); color:var(--primary); font-size:1.3rem; margin-bottom:0.8rem; font-weight:700; }

/* Caution Box */
.caution-box { background:rgba(185,28,28,0.05); border:1px solid rgba(185,28,28,0.2); border-left:6px solid #b91c1c; padding:2rem 2.2rem; border-radius:var(--radius-sm); margin:2.5rem 0; }
.caution-box h4 { color:#b91c1c; font-family:var(--font-heading); font-size:1.2rem; margin-bottom:0.8rem; font-weight:700; }
.caution-box .styled-list li::before { color:#b91c1c; }
.caution-box .styled-list li { color:var(--text-muted); }

/* Key Takeaways */
.takeaways-card { background:linear-gradient(135deg,#2e0505 0%,#4a0909 100%); color:white; padding:3rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:2px solid var(--accent); margin:4rem 0; }
.takeaways-card h2 { font-family:var(--font-heading); color:var(--accent); font-size:2rem; margin-bottom:1.5rem; text-align:center; }
.takeaways-card .styled-list li { color:#f3e9d8; }
.takeaways-card .styled-list li strong { color:var(--accent-light); }

/* FAQ */
.faq-section { background-color:var(--bg-cream); padding:5rem 0; margin-top:4rem; border-top:1px solid var(--border-color); }
.faq-container { max-width:950px; margin:0 auto; }
.faq-title { text-align:center; font-family:var(--font-heading); font-size:2.5rem; color:var(--primary); margin-bottom:3rem; }
.faq-item { background:var(--bg-white); margin-bottom:1.2rem; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border-color); transition:var(--transition); }
.faq-question { padding:1.6rem 2rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; background:var(--bg-white); transition:var(--transition); font-size:1.1rem; color:var(--primary); user-select:none; }
.faq-question:hover { background:#fffdfa; }
.faq-toggle-icon { font-size:1.4rem; color:var(--accent); font-weight:700; transition:transform 0.3s ease; }
.faq-item.active .faq-toggle-icon { transform:rotate(45deg); }
.faq-answer { padding:0 2rem; max-height:0; overflow:hidden; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
.faq-item.active .faq-answer { padding:0.8rem 2rem 2rem; max-height:500px; }
.faq-answer p { margin-bottom:0; font-size:1.05rem; }

/* CTA */
.cta-section { background:linear-gradient(rgba(26,2,2,0.94),rgba(46,5,5,0.97)),url('https://silkkhazana.in/wp-content/uploads/2026/08/hero_gi_silkmark_guide.jpg') center/cover; color:white; text-align:center; padding:6rem 20px; border-top:4px solid var(--accent); }
.cta-container { max-width:900px; margin:0 auto; }
.cta-section h2 { font-family:var(--font-heading); color:white; font-size:clamp(2rem,4.5vw,3rem); margin-bottom:1.5rem; }
.cta-section p { color:#eeddc5; font-size:1.2rem; margin-bottom:2.5rem; }
.cta-buttons-group { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; margin-bottom:2rem; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:1.1rem 3rem; background:var(--accent-gradient); color:var(--primary); text-decoration:none; font-weight:700; border-radius:50px; transition:var(--transition); text-transform:uppercase; letter-spacing:1px; box-shadow:0 10px 25px rgba(197,160,89,0.3); }
.btn:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 15px 35px rgba(197,160,89,0.5); background:#ffd700; }
.btn-secondary { background:transparent; border:2px solid var(--accent); color:var(--accent-light); box-shadow:none; }
.btn-secondary:hover { background:rgba(197,160,89,0.2); color:#fff; }
.cta-note { font-size:0.95rem; color:#d1be9d; margin-top:1rem; }

/* Back to Top */
#back-to-top { position:fixed; bottom:30px; right:30px; width:48px; height:48px; border-radius:50%; background:var(--accent); color:var(--primary); border:none; font-size:1.3rem; font-weight:bold; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 20px rgba(0,0,0,0.25); opacity:0; visibility:hidden; transition:var(--transition); z-index:99; }
#back-to-top.visible { opacity:1; visibility:visible; }
#back-to-top:hover { background:#fff; transform:translateY(-4px); }

/* RESPONSIVE */
@media (max-width:1200px) {
    .container { padding:0 25px; }
    .guide-layout { grid-template-columns:240px 1fr; gap:2.5rem; }
}
@media (max-width:992px) {
    .guide-layout { grid-template-columns:1fr; }
    .toc-sidebar { position:relative; top:0; margin-bottom:3rem; max-height:none; }
    .content-grid, .content-grid.reverse { grid-template-columns:1fr; grid-template-areas:"image" "text"; gap:2.5rem; }
    .image-block img { height:300px; }
    .step-item { flex-direction:column; align-items:flex-start; gap:1.2rem; }
}
@media (max-width:768px) {
    .container { padding:0 18px; }
    .hero { padding:4rem 15px 5rem; min-height:auto; }
    .callout-box.intro-callout { margin-top:-2.5rem; padding:1.8rem 1.2rem; }
    .section-title { font-size:1.6rem; padding-left:14px; border-left-width:4px; }
    p { font-size:1rem; line-height:1.75; }
    .image-block img { height:240px; }
    .takeaways-card { padding:2rem 1.4rem; }
    th, td { padding:0.85rem 0.9rem; font-size:0.88rem; }
    .cta-buttons-group { flex-direction:column; }
    .btn { width:100%; justify-content:center; padding:1rem 1.8rem; }
    .faq-title { font-size:2rem; }
    .faq-question { font-size:1rem; padding:1.2rem 1.4rem; }
    .faq-answer { padding:0 1.4rem; }
    .faq-item.active .faq-answer { padding:0.6rem 1.4rem 1.6rem; }
}
@media (max-width:480px) {
    .hero-title { font-size:1.9rem; }
    .image-block img { height:200px; }
    .callout-box { padding:1.2rem; }
    .step-number { width:50px; height:50px; font-size:1.7rem; }
    .feature-grid { grid-template-columns:1fr; }
}/* End custom CSS */