/*************** slider begins ************ */

.slider{
    width: 100%;
    height: 400px;
    overflow: hidden;
    color: aliceblue;
    font-size: 50px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 78px;
}
.image-holder {
    display: grid;
    grid-template-columns: repeat(4, 100%);
    height: 100%;
    width: 100%;
    animation: slider 30s ease-in-out infinite normal;
}

#slider-img-1{
    background-image: url(../images/img1.jpg);
    background-size: cover;
    padding: 200px 0;
    
}
#slider-img-2{
    background-image: url(../images/img2.jpg);
    background-size: cover;
    padding: 200px 0;
}
#slider-img-3{
    background-image: url(../images/img3.jpg);
    background-size: cover;
    padding: 200px 0;
}
#slider-img-4{
    background-image: url(../images/img4.jpg);
    background-size: cover;
    padding: 200px 0;
}

@keyframes slider{
    0%{transform: translateX(0%);}
    10%{transform: translateX(-100%);}
    20%{transform: translateX(-100%);}
    30%{transform: translateX(-200%);}
    40%{transform: translateX(-200%);}
    50%{transform: translateX(-200%);}
    60%{transform: translateX(-300%);}
    70%{transform: translateX(-300%);}
    80%{transform: translateX(-300%);}
    90%{transform: translateX(0%);}
    100%{transform: translateX(0%);}
}

/* *************Slider ends ************** */


.about{
    width: 65%;
    margin: auto;
    text-align: justify;
}

hr{
    width: 65%;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 17.5%;
}


.news{
    width: 50%;
    margin: auto;
}
    
h1{
    color: #500000;
}

.news-container{
    display: flex;
    margin-bottom: 50px;
}

.news-content{
    margin-left: 20px;
    text-align: justify;
} 


@media(max-width:1095px){

    .news-container{
        flex-direction: column;
    }
    .news-content{
        padding-top: 20px;
    }
    .news{
        width: 65%;
    }
    .slider{
        font-size: 40px;
    }

}