.slider{
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%;
    display: grid;
    place-items: center;
    overflow-x: hidden;
}
.img-sldie-head {
    overflow: hidden;
}
.img-sldie-head {
    overflow: hidden;
}
.slide-track{
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}
.slide-track:hover{
    animation-play-state: paused;
}
.slide-img{
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}
.slide-img img{
    width: 100%;
    transition: transform 1s;
    border-radius: 20px;
}
.slide-img img:hover{
    transform: translateZ(20px);
}
.slider::before,
.slider::after{
    background: linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0)100%);
    content: "";
    height: 100%;
    width: 15%;
    position: absolute;
    z-index: 2;
}
.slider::before{
    left: 0;
    top: 0;
}
.slider::after{
    right: 0;
    top: 0;
    transform: rotate(180deg);
}
@keyframes scroll {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}
.img-sldie-head h1 {
    text-align: center;
    margin-bottom: 100px;
    font-family: arial;
    font-weight: 600;
}
.vfd-panel h1 {
    font-size: 32px;
    text-align: center;
    margin-top: 102px;
}
.container.text-center.mt-5 h1 {
    text-align: center;
}
.btn-about {
    color: white;
    background: red;
    padding: 0 20px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-left: 60px;
    margin-top: -20px;
}
.btn-about a{
    text-decoration:none;
    color:white;
}
.btn-about:hover{
    background-color: black;
    transition: 0.3s;
    color:white;
}
.mt-5 {
    margin-top: -5rem !important;
}
.about-us-image{
    margin-top: 20px;
}
.img-sldie-head h1 span {
    background-color: rgba(156, 152, 152, 0.747);
    padding: 0 20px;
    border-radius: 40px;
}
.vfd-panel h1 span{
    background-color: rgba(156, 152, 152, 0.747);
    padding: 0 25px;
    border-radius: 40px;
}
/*@media screen and (max-width: 300px)*/
/*{*/
/*    .img-fluid{*/
/*        height: 20vh;*/
/*        align-items: center;*/
/*        margin-top: 50px;*/
/*    }*/
/*}*/
.image-container img {
                width: 100%;
                transition: transform 0.3s ease-in-out;
            }
            .image-container img:hover {
                transform: scale(1.1);
            }
/*slide-section*/
     .box-4 {
            background: #fff;
            padding: 20px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
            border:
        }
        .box-4:hover {
            box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px);
        }
        .box-4 img {
            max-width: 100%;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .carousel-container {
            position: relative;
            max-width: 90%;
            margin: auto;
        }
        .custom-prev, .custom-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            padding: 10px 15px;
            font-size: 24px;
            cursor: pointer;
            border-radius: 5px;
            z-index: 10;
        }
        .custom-prev { left: -50px; }
        .custom-next { right: -50px; }
        .custom-prev:hover, .custom-next:hover {
            background: rgba(0, 0, 0, 0.8);
        }
        .box-4 {
    font-size: 15px;
    font-weight: 500;
    font-family: sans-serif;
}
.box-4 p {
    color: gray;
}
.box-4 h5{
    font-weight: 600;
}