/* Glass railing — extracted from frontend-final-html-design/glass-railing.php */
    
 /* =============================================
 CUSTOM GLASS FURNITURE TOPS — NEW CSS
 Paste into your style.css
 Colors: #0a1f4b (Navy) | #ac151c (Red)
 ============================================= */


/* =============================================
 BANNER — DIAGONAL SPLIT DESIGN
 ============================================= */

#shareInnerBanner {
position: relative;
min-height: 520px;
padding: 0 !important;
display: flex;
align-items: stretch;
overflow: hidden;
background: none !important;
}

.banner-glass-bg {
position: absolute;
inset: 0;
background: url('../assects/national-glass-images/customglassrailing/railing.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}

.banner-glass-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
  108deg,
  rgba(10, 31, 75, 0.95) 0%,
  rgba(10, 31, 75, 0.88) 45%,
  rgba(10, 31, 75, 0.28) 72%,
  transparent 100%
);
}

.banner-diagonal-accent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 42%;
z-index: 1;
clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
overflow: hidden;
}

.banner-diagonal-accent img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
display: block;
}

.banner-glass-inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
min-height: 520px;
width: 100%;
}

.banner-glass-content {
max-width: 580px;
padding: 60px 0;
animation: bannerSlideIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.banner-glass-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
color: #ac151c;
margin-bottom: 18px;
}

.banner-glass-eyebrow::before {
content: '';
display: block;
width: 30px;
height: 2px;
background: #ac151c;
flex-shrink: 0;
}

.banner-glass-title {
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 400;
line-height: 1.1;
color: #ffffff;
margin: 0 0 8px;
}

.banner-glass-title .accent-red {
color: #ac151c;
}

.banner-glass-desc {
font-size: 16px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.7;
margin: 16px 0 30px;
max-width: 460px;
}

.banner-glass-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}

.banner-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ac151c;
color: #ffffff;
padding: 13px 28px;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
text-decoration: none;
letter-spacing: 0.4px;
transition: background 0.25s ease, transform 0.2s ease;
}

.banner-btn-primary:hover {
background: #8e1118;
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}

.banner-btn-outline {
display: inline-flex;
align-items: center;
background: transparent;
color: #ffffff;
padding: 13px 28px;
border-radius: 4px;
border: 1.5px solid rgba(255, 255, 255, 0.45);
font-size: 14px;
font-weight: 400;
text-decoration: none;
transition: border-color 0.25s, background 0.25s, transform 0.2s;
}

.banner-btn-outline:hover {
border-color: #ffffff;
background: rgba(255, 255, 255, 0.1);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}

.banner-glass-stats {
display: flex;
gap: 36px;
margin-top: 38px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
animation: bannerSlideIn 1s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.banner-stat-number {
font-size: 28px;
font-weight: 800;
color: #ffffff;
line-height: 1;
}

.banner-stat-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 1.2px;
}

@keyframes bannerSlideIn {
from { opacity: 0; transform: translateX(-28px); }
to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 991px) {
.banner-diagonal-accent { display: none; }
.banner-glass-overlay { background: rgba(10, 31, 75, 0.88); }
.banner-glass-content { max-width: 100%; }
.banner-glass-stats { gap: 24px; }
}

@media (max-width: 576px) {
.banner-glass-stats { gap: 18px; }
.banner-stat-number { font-size: 22px; }
}


/* =============================================
 SHARED UTILITIES
 ============================================= */

.highlight { color: #ac151c; }

.sib-badge {
display: inline-block;
background: rgba(172, 21, 28, 0.08);
color: #ac151c;
font-size: 11px;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 3px;
margin-bottom: 14px;
}

.sib-desc {
font-size: 15.5px;
color: #555;
line-height: 1.8;
margin-bottom: 16px;
}

.cf-divider {
width: 44px;
height: 3px;
background: #ac151c;
border-radius: 2px;
margin: 18px 0 22px;
}

.text-balance { text-wrap: balance; }


/* =============================================
 KEY BENEFITS SECTION
 ============================================= */

.ng-benefits-section {
background: #f7f9fc;
}

.common-feature-image {
border-radius: 8px;
overflow: hidden;
position: relative;
}

.common-feature-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: #ac151c;
}

.common-feature-image img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}

.common-feature-image:hover img {
transform: scale(1.04);
}

.kb-features-list {
list-style: none;
padding: 0;
margin: 22px 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 18px;
}

.kb-features-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14.5px;
color: #333;
line-height: 1.5;
}

.kb-check {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(172, 21, 28, 0.1);
color: #ac151c;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
margin-top: 1px;
}


/* =============================================
 PRECISION FIT SECTION
 ============================================= */

.ng-precision-section {
background: #ffffff;
}

.cf-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}

.cf-tag {
display: inline-flex;
align-items: center;
background: #f0f4fa;
color: #0a1f4b;
font-size: 13px;
font-weight: 400;
padding: 7px 14px;
border-radius: 4px;
border: 1px solid rgba(10, 31, 75, 0.12);
transition: background 0.2s, color 0.2s;
cursor: default;
}

.cf-tag:hover {
background: #0a1f4b;
color: #fff;
}


/* =============================================
 GALLERY SECTION
 ============================================= */

.ng-gallery-section {
background: #0a1f4b;
}



.ng-gallery-section .highlight {
color: #ac151c;
}

.sg-slide img,
.frmd-en-slide img {
width: 100%;
height: 270px;
object-fit: cover;
border-radius: 6px;
display: block;
transition: transform 0.4s ease, opacity 0.3s;
}

.sg-slide:hover img,
.frmd-en-slide:hover img {
transform: scale(1.04);
opacity: 0.88;
}


/* =============================================
 NEW SECTION 1 — GLASS THICKNESS GUIDE
 ============================================= */

.ng-thickness-section {
background: #ffffff;
position: relative;
overflow: hidden;
}

.ng-thickness-section::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 350px;
height: 350px;
border-radius: 50%;
background: rgba(172, 21, 28, 0.035);
pointer-events: none;
}

.gtg-header {
text-align: center;
margin-bottom: 44px;
}

.gtg-header .section-desc {
max-width: 580px;
margin: 12px auto 0;
}

.gtg-table-wrapper {
overflow-x: auto;
border-radius: 10px;
border: 1px solid rgba(10, 31, 75, 0.1);
}

.gtg-table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
min-width: 520px;
}

.gtg-table thead tr {
background: #0a1f4b;
color: #ffffff;
}

.gtg-table thead th {
padding: 16px 20px;
font-weight: 400;
text-align: left;
font-size: 12.5px;
letter-spacing: 0.6px;
text-transform: uppercase;
}

.gtg-table tbody tr {
border-bottom: 1px solid rgba(10, 31, 75, 0.07);
transition: background 0.2s;
}

.gtg-table tbody tr:last-child { border-bottom: none; }
.gtg-table tbody tr:hover { background: #f5f7fc; }

.gtg-table tbody td {
padding: 15px 20px;
color: #444;
vertical-align: middle;
}

.gtg-table tbody td:first-child {
font-weight: 400;
color: #0a1f4b;
font-size: 15px;
}

.gtg-recommended {
display: inline-block;
background: rgba(172, 21, 28, 0.1);
color: #ac151c;
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 3px;
margin-left: 8px;
vertical-align: middle;
}

.gtg-note {
margin-top: 22px;
padding: 16px 20px;
background: rgba(10, 31, 75, 0.04);
border-left: 3px solid #0a1f4b;
border-radius: 0 6px 6px 0;
font-size: 14.5px;
color: #555;
line-height: 1.7;
}

.gtg-note strong { color: #0a1f4b; }


/* =============================================
 NEW SECTION 2 — WHY NATIONAL GLASS & MIRROR
 ============================================= */

.ng-why-section {
background: #0a1f4b;
position: relative;
overflow: hidden;
}

.ng-why-section::before {
content: '';
position: absolute;
bottom: -70px;
left: -70px;
width: 280px;
height: 280px;
border-radius: 50%;
background: rgba(172, 21, 28, 0.1);
pointer-events: none;
}

.wn-header {
text-align: center;
margin-bottom: 46px;
}

.wn-header .section-title {
color: #ffffff;
}

.wn-header p {
font-size: 15.5px;
color: rgba(255, 255, 255, 0.62);
max-width: 580px;
margin: 14px auto 0;
line-height: 1.8;
}

.wn-reasons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 22px;
}

.wn-reason-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 28px 22px;
transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s;
}

.wn-reason-card:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(172, 21, 28, 0.5);
transform: translateY(-5px);
}

.wn-reason-icon {
width: 46px;
height: 46px;
border-radius: 8px;
background: rgba(172, 21, 28, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}

.wn-reason-icon svg {
width: 22px;
height: 22px;
stroke: #ac151c;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.wn-reason-card h4 {
font-size: 16px;
font-weight: 400;
color: #ffffff;
margin: 0 0 10px;
}

.wn-reason-card p {
font-size: 14px;
color: rgba(255, 255, 255, 0.58);
line-height: 1.7;
margin: 0;
}

.wn-cta {
text-align: center;
margin-top: 46px;
}

.wn-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ac151c;
color: #ffffff;
padding: 14px 32px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
transition: background 0.25s, transform 0.2s;
}

.wn-cta-btn:hover {
background: #8e1118;
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}

.wn-cta-btn svg {
stroke: currentColor;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}


/* =============================================
 FAQ SECTION
 ============================================= */

.ng-faq-section {
background: #f7f9fc;
}

.accordion-item {
border: 1px solid rgba(10, 31, 75, 0.1) !important;
border-radius: 6px !important;
margin-bottom: 10px;
overflow: hidden;
background: #fff;
transition: box-shadow 0.25s;
}

.accordion-item:hover {
box-shadow: 0 4px 16px rgba(10, 31, 75, 0.07);
}

.accordion-button {
font-size: 15px;
font-weight: 400;
color: #0a1f4b !important;
background: #ffffff !important;
padding: 18px 20px;
}

.accordion-button:not(.collapsed) {
color: #ac151c !important;
background: #fff !important;
box-shadow: none !important;
}

.accordion-body {
font-size: 15px;
color: #555;
line-height: 1.8;
padding: 4px 20px 20px;
background: #fff;
}


/* =============================================
 SCROLL REVEAL ANIMATION
 ============================================= */

.reveal-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.32s; }
.reveal-delay-4 { transition-delay: 0.42s; }