.rubberrail {
  display: grid;
 
}

/* Desktop (≥992px) → 20/20/30/30 */
@media (min-width: 992px) {
  .rubberrail {
    grid-template-columns: 20% 40% 40%;
  }
}

/* Tablet (≤991px) → two per row */
@media (max-width: 991px) and (min-width: 576px) {
  .rubberrail {
    grid-template-columns: 50% 50%;
  }
}

/* Mobile (≤575px) → one per row */
@media (max-width: 575px) {
  .rubberrail {
    grid-template-columns: 100%;
  }
}



	
	
        .banner-mg:nth-child(1) {
            background-image: url(../images/banner/Railway.jpg);
            height: 70vh;
        }

        .team-two .content {
            cursor: pointer;
        }

        .banner-mg .txt-con {
            font-size: 40px;
            width: 100%;
            line-height: normal;
            position: absolute;
            color: #fff;
            padding: 30px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            z-index: 2;
            text-align: center
        }

        .box-containerr {
            align-items: center;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            justify-content: flex-start;
            gap: 40px;
            position: relative;
            z-index: 9;
            /* background: #F2F2F2; */
        }

        .no-back .flip-boxx-header {
            top: -9px !important;
        }
		
		 /* FORCE 5 ITEMS PER ROW */

.box-containerr{
display:grid !important;
grid-template-columns:repeat(5, 1fr) !important;
gap:20px;
}

.box-itemm{
width:100% !important;
max-width:100% !important;
}

/* Tablet */
@media (max-width:992px){
.box-containerr{
grid-template-columns:repeat(3, 1fr) !important;
}
}

/* Small tablet */
@media (max-width:768px){
.box-containerr{
grid-template-columns:repeat(2, 1fr) !important;
}
}

/* Mobile */
@media (max-width:480px){
.box-containerr{
grid-template-columns:repeat(1, 1fr) !important;
}
}

.flip-boxx-header {
    font-size: 18px !important;
	    padding-top: 12px !important;
   
}

/* PRODUCT IMAGE CARD */

.flip-boxx-front{
position:relative;
background-size:contain !important;
background-position:center;
background-repeat:no-repeat;
height:220px;
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
transition:transform .3s ease;
}

/* TITLE */
.flip-boxx-header{
background:#ce352f;
color:#fff;
padding:6px 10px;
font-size:14px;
margin:0;
}

/* ZOOM ICON */

.zoom-expand{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(.6);
opacity:0;
font-size:26px;
color:#fff;
background:rgba(0,0,0,0.55);
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:all .3s ease;
}

/* DARK HOVER OVERLAY */

.flip-boxx-front::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0);
transition:.3s;
}

/* HOVER EFFECT */

.flip-boxx-front:hover::after{
background:rgba(0,0,0,0.35);
}

.flip-boxx-front:hover .zoom-expand{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

.flip-boxx-front:hover{
transform:scale(1.05);
cursor:pointer;
}

.list-title{
    background: #ce352f;
    color: #fff;
    padding: 2px 10px;
	font-weight:600;
    font-size: 18px;
    margin: 0;
}

/* LIST BOX */

.list-box{
border:1px solid #e5e5e5;
background:#fff;
height:100%;
}

 

/* LIST */

.list-box ul{
list-style:none;
margin:0;
padding:10px 15px 15px 15px;
}

.list-box ul li{
display:flex;
align-items:center;
gap:10px;
padding:7px 0;
font-size:14px;
border-bottom:1px solid #f1f1f1;
}

.list-box ul li:last-child{
border-bottom:none;
}

/* ICON */

.list-icon{
font-size:16px;
color:#ce352f;
min-width:20px;
}

.list-icon{
width:18px;
height:18px;
stroke:#ce352f;
fill:none;
stroke-width:2;
flex-shrink:0;
}

 .corporate-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 .bogie-list .border , .other-rubber .border {
 background:#fff;
 }
 
 .railway-list li {
  position: relative;
  padding-left: 0.2rem;
  margin-bottom: 0.375rem;
  font-weight: 500;
}
.railway-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.2rem;
  height: 1.2rem;
  background-repeat: no-repeat;
  background-size: contain;
  /* Inline SVG railway wheel icon in brand color #222364 */
  background-image: url("data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
      <circle cx='12' cy='12' r='10' stroke='%23222364' stroke-width='2' fill='none'/>
      <circle cx='12' cy='12' r='3' fill='%23222364'/>
      <line x1='12' y1='2' x2='12' y2='22' stroke='%23222364' stroke-width='1'/>
      <line x1='2' y1='12' x2='22' y2='12' stroke='%23222364' stroke-width='1'/>
      <line x1='4.5' y1='4.5' x2='19.5' y2='19.5' stroke='%23222364' stroke-width='1'/>
      <line x1='19.5' y1='4.5' x2='4.5' y2='19.5' stroke='%23222364' stroke-width='1'/>
    </svg>");
}

/* make all cards equal height */

.equal-card{
height:230px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

/* image area same height */

.equal-card img{
max-height:120px;
object-fit:contain;
}

/* list box same height */

.list-box{
height:230px;
display:flex;
flex-direction:column;
}

/* list spacing */

.list-box ul{
margin-top:10px;
padding-left:0;
}
.rtitle h3{
	margin-bottom:20px !important; 
}
.rtitle{
	margin-bottom:20px !important; 
}