:root{
  --primary:#E31E24;
  --secondary:#1F3C88;
  --light:#f6f9ff;
  --white:#fff;
  --shadow:0 18px 45px rgba(0,0,0,.18);
  --transition:.35s ease;
}

body{
 font-family:'Poppins',sans-serif;
 background:var(--light);
 margin:0;
 color:#333;
}

/* ================= CONTAINER ================= */
.container{
 max-width:1200px;
 margin:auto;
 padding:0 20px;
}

/* ================= HOSPITAL HEADING ================= */
.hero{
    background:#fff;
    padding:30px 10px 20px;
    text-align:center;
    border-bottom:3px solid #d32f2f;
}

.hero h1{
    font-size:36px;
    font-weight:800;
    color:#d32f2f;
    margin:20px 15px 10px;
    line-height:1.3;
    text-transform:uppercase;
    letter-spacing:1px;
}

.hero-subtitle{
    font-size:16px;
    color:#444;
    max-width:850px;
    margin:0 auto;
    line-height:1.7;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .hero h1{
        font-size:28px;
    }
    .hero-subtitle{
        font-size:15px;
        padding:0 10px;
    }
}

/* ================= IMAGE + TEXT ================= */
.image-text{
 display:flex;
 gap:40px;
 align-items:flex-start;
 margin-bottom:70px;
}

.image-text img{
 width:40%;
 border-radius:18px;
 box-shadow:var(--shadow);
 transition:var(--transition);
}

.image-text img:hover{
 transform:scale(1.05);
}

.image-text .text{
 width:60%;
}

.image-text h2{
 color:var(--secondary);
 font-size:30px;
 font-weight:700;
 margin-bottom:15px;
}

.image-text p{
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 15px;
    text-align: justify;
}

/* ================= ICON FACILITIES ================= */
.icon-facilities{
 padding:80px 20px;
 background:var(--white);
}

.section-heading{
 text-align:center;
 font-size:34px;
 font-weight:700;
 color:var(--secondary);
 margin-bottom:60px;
}

.icon-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
 gap:30px;
}

.icon-box{
 background:var(--white);
 padding:35px 25px;
 border-radius:22px;
 text-align:center;
 box-shadow:var(--shadow);
 border:2px solid transparent;
 transition:var(--transition);
 cursor:pointer;
}

.icon-box i{
 font-size:46px;
 margin-bottom:18px;
 color:var(--primary);
 transition:var(--transition);
}

.icon-box h4{
 font-size:19px;
 font-weight:600;
 color:var(--secondary);
 margin-bottom:12px;
}

.icon-box p{
 font-size:15px;
 line-height:1.6;
 color:#555;
}

.icon-box:hover{
 transform:translateY(-12px);
 border-color:var(--primary);
}

.icon-box:hover i{
 transform:scale(1.25) rotate(8deg);
 color:var(--secondary);
}

/* ================= AYUSHMAN BHARAT ================= */
.ayushman-section{
 padding:80px 20px;
 background:linear-gradient(135deg,#f6f9ff,#eef3ff);
}

.ayushman-row{
 max-width:1200px;
 margin:auto;
 display:flex;
 gap:40px;
 align-items:center;
 opacity:0;
 transform:translateY(60px);
 transition:.8s ease;
}

.ayushman-row.visible{
 opacity:1;
 transform:none;
}

.ayushman-img-container{
 flex:1;
 border-radius:22px;
 overflow:hidden;
 box-shadow:var(--shadow);
}

.ayushman-img{
 width:100%;
 display:block;
}

.ayushman-text{
 flex:1;
}

.ayushman-text h2{
 font-size:32px;
 color:var(--secondary);
 margin-bottom:20px;
}

.ayushman-text p{
 font-size:16px;
 line-height:1.7;
 margin-bottom:15px;
}

/* ================= TABLE ================= */
table{
 width:100%;
 border-collapse:collapse;
 background:var(--white);
 border-radius:18px;
 overflow:hidden;
 box-shadow:var(--shadow);
 margin:60px 0;
}

th{
 background:var(--secondary);
 color:#fff;
 padding:14px;
 font-size:15px;
}

td{
 padding:12px;
 border-bottom:1px solid #eee;
}

tfoot td{
 background:#f1f4ff;
 font-weight:600;
}

input[type=number]{
 width:90px;
 padding:6px;
 border-radius:6px;
 border:1px solid #ccc;
 text-align:center;
}

/* ================= RESPONSIVE ================= */
@media(max-width:992px){
 .image-text,.ayushman-row{
  flex-direction:column;
 }
 .image-text img,.image-text .text{
  width:100%;
 }
}

@media(max-width:576px){
 .hospital-heading{
  font-size:32px;
 }
 .section-heading{
  font-size:28px;
 }
}
