:root {
--navy-blue: #0a1f4b;
--accent-red: #ac151c;
}

/* --- Dynamic Diagonal Banner --- */
.emergency-hero-unique {
background: url('../assects/national-glass-images/emergencyglassrepair/emergencyglassrepair1.jpg');
background-size: cover !important;
background-position: center !important;
padding: 180px 0;
position: relative;
overflow: hidden;
}

/* Red Diagonal Element */
.hero-diagonal-overlay {
position: absolute;
top: 0;
left: -25%;
width: 65%;
height: 100%;
background: var(--accent-red);
transform: skewX(-15deg);
z-index: 1;
opacity: 0.95;
}

/* Text Panel Overlaying Diagonal */
.hero-text-panel {
background: rgba(255, 255, 255, 0.98);
padding: 60px;
border-radius: 4px;
position: relative;
z-index: 2;
box-shadow: 20px 20px 0px rgba(10, 31, 75, 0.08);
animation: panelReveal 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.emergency-badge {
background: var(--navy-blue);
color: #fff;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 400;
display: inline-block;
margin-bottom: 20px;
letter-spacing: 1px;
}

.hero-title-text {
font-size: 3.2rem;
line-height: 1.1;
margin-bottom: 30px;
}

.navy-bold { color: var(--navy-blue); font-weight: 400; display: block; }
.red-thin { color: var(--accent-red); font-weight: 400; display: block; }

.hero-actions {
display: flex;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}

.hero-call-text {
font-size: 1.1rem;
color: var(--navy-blue);
}

/* --- Form Card --- */
.emergency-card-style {
background: #fff !important;
border: none !important;
border-radius: 20px !important;
box-shadow: 0 20px 60px rgba(10, 31, 75, 0.1) !important;
border-top: 5px solid var(--accent-red);
}

/* --- Process Cards --- */
.process-card-unique {
background: #fff;
padding: 40px 30px;
border-radius: 15px;
border: 1px solid #eee;
height: 100%;
transition: 0.3s;
position: relative;
}

.process-card-unique:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.process-card-unique .icon-wrap {
font-size: 2.5rem;
font-weight: 900;
color: rgba(172, 21, 28, 0.1);
position: absolute;
top: 20px;
right: 30px;
}

.process-card-unique h5 { color: var(--navy-blue); font-weight: 400; }

/* --- General Content Styles --- */
.highlight { color: var(--accent-red); font-weight: 400; }
.section-title { color: var(--navy-blue); font-weight: 400; }

.emergency-img-reveal {
overflow: hidden;
border-radius: 20px;
}

.emergency-img-reveal img {
width: 100%;
height: auto;
display: block;
transition: transform 1.2s ease;
}

.emergency-img-reveal:hover img {
transform: scale(1.1);
}

/* --- Animations --- */
@keyframes panelReveal {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --- */
@media (max-width: 991px) {
.emergency-hero-unique { padding: 100px 0; }
.hero-diagonal-overlay { width: 100%; left: 0; transform: skewX(0deg); opacity: 0.9; }
.hero-text-panel { padding: 40px 25px; text-align: center; }
.hero-title-text { font-size: 2.4rem; }
.hero-actions { justify-content: center; }