Safety & Awareness Section Preview
:root {
--gov-blue-main: #0b4f6c;
--gov-blue-dark: #083b52;
--gov-blue-soft: #0f6e8c;
--gov-accent: #0ea5a8;
--gov-maroon: #8b1e2d;
--card-shadow: 0 4px 16px rgba(0,0,0,0.08);
--card-shadow-hover: 0 12px 32px rgba(0,0,0,0.14);
--transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #f2f5f8;
padding: 30px;
}
/* ========================
SECTION WRAPPER
======================== */
.safety-section {
max-width: 1280px;
margin: 0 auto;
}
/* ========================
SECTION STRIP
======================== */
/* ========================
3-COLUMN GRID
======================== */
.safety-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 20px;
align-items: stretch;
}
/* ========================
COLUMN 1 — CAROUSEL
✅ REDUCED HEIGHT: 420px → 360px
======================== */
.safety-carousel-wrap {
border-radius: 14px;
overflow: hidden;
box-shadow: var(--card-shadow-hover);
position: relative;
min-height: 360px;
background: #0b1e2d;
}
/* Slides */
.carousel-track {
position: relative;
width: 100%;
height: 100%;
min-height: 360px;
}
.carousel-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.9s ease;
background-size: cover;
background-position: center;
}
.carousel-slide.active {
opacity: 1;
}
/* Each slide bg */
.slide-1 {
background-image: url('https://cdn.s3waas.gov.in/s3f4b9ec30ad9f68f89b29639786cb62ef/uploads/2026/02/17709652501597.jpeg'),
linear-gradient(135deg, #1a3a5c, #0b2d45);
background-size: cover;
}
.slide-2 {
background-image: url('https://cdn.s3waas.gov.in/s3f4b9ec30ad9f68f89b29639786cb62ef/uploads/2026/02/17709667357545.jpeg'),
linear-gradient(135deg, #1a2c1a, #0b2d0b);
background-size: cover;
}
.slide-3 {
background-image: url('https://cdn.s3waas.gov.in/s3f4b9ec30ad9f68f89b29639786cb62ef/uploads/2026/02/17709652626968.jpeg'),
linear-gradient(135deg, #1a1a3a, #0b0b2d);
background-size: cover;
}
.slide-4 {
background-image: url('https://cdn.s3waas.gov.in/s3f4b9ec30ad9f68f89b29639786cb62ef/uploads/2026/02/17716668397867.jpg'),
linear-gradient(135deg, #1a3a45, #0b2d38);
background-size: cover;
}
/* Dark gradient over image */
.carousel-slide::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(5,20,35,0.90) 0%,
rgba(5,20,35,0.45) 50%,
rgba(5,20,35,0.20) 100%
);
}
/* Caption */
.slide-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 3;
padding: 20px 20px 16px;
}
.slide-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(14,165,168,0.9);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 8px;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.slide-caption h3 {
font-size: 18px;
font-weight: 800;
color: #ffffff;
margin-bottom: 5px;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
line-height: 1.3;
}
.slide-caption p {
font-size: 12px;
color: rgba(255,255,255,0.85);
line-height: 1.4;
}
/* Arrows */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
width: 36px; height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
transition: var(--transition);
backdrop-filter: blur(4px);
user-select: none;
}
.carousel-arrow:hover {
background: var(--gov-accent);
border-color: var(--gov-accent);
}
.carousel-arrow.prev { left: 12px; }
.carousel-arrow.next { right: 12px; }
/* Dots */
.carousel-dots {
position: absolute;
bottom: 12px;
right: 16px;
z-index: 5;
display: flex;
gap: 6px;
}
.carousel-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
cursor: pointer;
transition: var(--transition);
border: none;
padding: 0;
}
.carousel-dot.active {
background: var(--gov-accent);
width: 22px;
border-radius: 4px;
}
/* ========================
COLUMN 2 — HELPLINES
✅ REDUCED PADDING
======================== */
.helpline-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-3px);
}
/* Make Helpline header identical to Links header */
.helpline-header {
background: linear-gradient(135deg, var(--gov-blue-main), var(--gov-blue-dark));
padding: 12px 16px;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}
.helpline-header h3 {
font-size: 16px;
font-weight: 700;
color: #fff;
margin: 0;
}
.helpline-header span {
font-size: 18px;
}
.helpline-card {
padding: 0 !important;
width: 100% !important;
border-radius: 14px !important;
overflow: hidden;
}
.helpline-card h3 {
border: none !important;
padding: 0 !important;
margin: 0 !important;
color: #fff !important;
font-size: 16px !important;
}
/* Ensure header flush alignment */
.helpline-header {
border-radius: 0 !important;
}
.helpline-body {
padding: 10px 12px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Section blocks */
.hl-section {
border-radius: 8px;
overflow: hidden;
border-left: 4px solid;
}
.hl-section-title {
padding: 6px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 5px;
}
.hl-emergency {
border-color: #ef4444;
}
.hl-emergency .hl-section-title {
background: #fef2f2;
color: #b91c1c;
}
.hl-social {
border-color: var(--gov-blue-soft);
}
.hl-social .hl-section-title {
background: #eff8ff;
color: var(--gov-blue-main);
}
.hl-cyber {
border-color: #f59e0b;
}
.hl-cyber .hl-section-title {
background: #fffbeb;
color: #92400e;
}
.hl-control {
border-color: #10b981;
}
.hl-control .hl-section-title {
background: #ecfdf5;
color: #065f46;
}
/* List */
.hl-list {
list-style: none !important;
padding: 0 !important;
margin: 0;
background: #fafbfc;
}
.hl-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px !important;
border-bottom: 1px dashed #e8edf2 !important;
transition: var(--transition);
}
.hl-list li:last-child {
border-bottom: none !important;
}
.hl-list li:hover {
background: #f0f6fb;
padding-left: 14px !important;
}
.hl-label {
font-size: 13px;
font-weight: 600;
color: #334155;
}
.hl-number {
font-size: 15px;
font-weight: 800;
color: var(--gov-blue-main);
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
}
/* Control room */
.hl-control-body {
background: #ecfdf5;
padding: 8px 12px;
}
.hl-control-body p {
font-size: 12px;
font-weight: 700;
color: #065f46;
line-height: 1.4;
}
/* ========================
COLUMN 3 — IMPORTANT LINKS
✅ REDUCED PADDING
======================== */
.links-card {
background: #ffffff;
border-radius: 14px;
box-shadow: var(--card-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
transition: var(--transition);
}
.links-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-3px);
}
.links-header {
background: linear-gradient(135deg, var(--gov-blue-main), var(--gov-blue-dark));
padding: 12px 16px;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}
.links-header h3 {
font-size: 16px;
font-weight: 700;
color: #fff;
margin: 0;
}
.links-header span {
font-size: 18px;
}
.links-body {
padding: 6px 0;
flex: 1;
}
.helpful-links-list {
list-style: none !important;
padding: 0 !important;
margin: 0;
}
.helpful-links-list li {
border-bottom: 1px solid #f0f4f8 !important;
padding: 0 !important;
transition: var(--transition);
}
.helpful-links-list li:last-child {
border-bottom: none !important;
}
.helpful-links-list li:hover {
background: #f4f9fc;
}
.helpful-links-list a {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
text-decoration: none;
color: #1e3a52;
font-size: 13px;
font-weight: 500;
transition: var(--transition);
line-height: 1.4;
}
.helpful-links-list a::before {
content: '↗';
font-size: 12px;
color: var(--gov-accent);
flex-shrink: 0;
font-weight: 700;
opacity: 0;
transform: translateX(-6px);
transition: var(--transition);
}
.helpful-links-list li:hover a {
color: var(--gov-blue-main);
padding-left: 22px;
font-weight: 600;
}
.helpful-links-list li:hover a::before {
opacity: 1;
transform: translateX(0);
}
/* ========================
RESPONSIVE
======================== */
@media (max-width: 1024px) {
.safety-row {
grid-template-columns: 1fr 1fr;
}
.safety-carousel-wrap {
grid-column: 1 / -1;
min-height: 300px;
}
.carousel-track {
min-height: 300px;
}
}
@media (max-width: 640px) {
.safety-row {
grid-template-columns: 1fr;
}
.safety-carousel-wrap {
grid-column: auto;
min-height: 260px;
}
.carousel-track {
min-height: 260px;
}
}
🛡️ Safety & Awareness
⚠️ Advisory
Earthquake Safety
Drop, Cover and Hold On. Stay away from windows and heavy furniture during tremors.
🔥 Fire Safety
Fire Safety Guidelines
Know your nearest exit. Never use lifts during a fire. Call 101 immediately.
💻 Cyber Safety
Stay Safe Online
Never share OTPs or passwords. Report cyber crime at 1930 or cybercrime.gov.in.
🌊 Flood Alert
Flood Preparedness
Move to higher ground immediately. Avoid flooded roads. Listen to official alerts.
‹
›
🚨 Emergency
Police
100
Fire
101
Ambulance
102
🤝 Social Support
Women Helpline
181
Child Helpline
1098
Senior Citizens
14567
Tele-MANAS
14416
🏛️ District Control Room
2483651 / 2457543 / 2457552
let current = 0;
const slides = document.querySelectorAll('.carousel-slide');
const dots = document.querySelectorAll('.carousel-dot');
let timer = setInterval(() => changeSlide(1), 4500);
function goToSlide(n) {
slides[current].classList.remove('active');
dots[current].classList.remove('active');
current = (n + slides.length) % slides.length;
slides[current].classList.add('active');
dots[current].classList.add('active');
clearInterval(timer);
timer = setInterval(() => changeSlide(1), 4500);
}
function changeSlide(dir) {
goToSlide(current + dir);
}
// Pause on hover
document.querySelector('.safety-carousel-wrap').addEventListener('mouseenter', () => clearInterval(timer));
document.querySelector('.safety-carousel-wrap').addEventListener('mouseleave', () => {
timer = setInterval(() => changeSlide(1), 4500);
});