:root{
    --color: #990B6E;
    --pad: 0px 130px;
    --black: #000;
    --white: #fff;
}

*{
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

.display{
    display: flex;
}

a{
    text-decoration: none;
}

.hero{
    height: 500px;
    width: 100%;
    background: url("/assets/images/slide-1.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    animation: fade 9s infinite;
}

@keyframes fade{
    0%{
        background-image: url("../images/slide-1.jpg");
    }

    50%{
        background-image: url("../images/slide-2.jpg");
    }

    100%{
        background-image: url("../images/slide-1.jpg");
    }
}

.hero .hero-text{
    color: var(--white);
    padding: 120px 150px;
    width: 60%;
}

.hero .hero-text .button{
    padding: 10px 30px;
    border: 1px solid white;
    background-color: var(--color);
    color: var(--white);
}

/* text card css is here */
.text-card{
    width: 100%;
    padding: var(--pad);
    margin: 80px 0px;
    flex-direction: column;
    align-items: center;
}

.text-card .text{
    font-size: 26px;
    padding: 0px 200px;
    text-align: center;
}

.text-card .text .colored-text{
    color: var(--color);
    font-weight: 700;
}

.pagebar{
    margin: 20px 0px;
    height: 4px;
    width: 40px;
    background-color: var(--color);
}

/* card 1 css is here */
.card1{
    flex-wrap: wrap;
    padding: var(--pad);
    justify-content: center;
}

.card1 .image{
    width: 625px;
    padding: 20px;
}

.card1 .image img{
    width: 100%;
}

.card1 .text, .card2 .text{
    width: 45%;
    padding: 0px 30px 30px 30px;
}

.card1 .text h2{
    color: var(--black);
    font-weight: bolder;
    padding: 15px 0px;
}

.card1 .text h5{
    color: var(--black);
    font-weight: bold;
    padding: 10px 0px;
}

.card1 .text a{
    text-decoration: none;
    color: var(--color);
    font-weight: 700;
}

.benefit{
    padding: var(--pad);
    justify-content: space-around;
    margin: 80px 0px;
}

.benefits{
    align-items: center;
    width: 20%;
}

.benefits img{
    height: 20px;
}

.card2{
    flex-wrap: wrap;
    align-items: center;
    /* animation: scroll ; */
    background-color: #f0fff0;
}

.card2 .image{
    width: 50%;
}

.card2 .image img{
    width: 100%;
}

.card2 .text{
    align-items: center;
}

.card2 .para{
    margin: 10px;
    width: 45%;
}

.card2 .text{
    padding: 20px;
}

/* this is news area css */
.news{
    margin: 80px 0px;
    padding: var(--pad);
    justify-content: center;
    /* flex-direction: row; */
    flex-wrap: wrap;

}

.news .news-articles{
    flex-direction: column;
    width: 70%;
}

.news .heading{
    padding-bottom: 40px;
}

.articles{
    flex-wrap: wrap;
    justify-content: space-between;
}

.articles .article{
    padding: 10px 0px;
    width: 27%;
    margin-right: 40px;
}

.articles .article a{
    color: var(--color);
}

.articles .article p{
    margin-top: 15px;
}

.highlighted-article{
    background-color: var(--color);
    width: 20%;
    color: var(--white);
    border-radius: 4px;
    padding: 80px 20px;
}

.highlighted-article:hover, .article:hover{
    transform: scale(1.03);
    transition-duration: 800ms;
}

.highlighted-article .links:hover{
    font-size: 17px;
    transition-duration: 800ms;
}

/* .highlighted-article .links::after{
    content: ;
} */
    

/* THIS IS THE SCROLLING CARD ELEMENT  */

.scroller{
    padding: var(--pad);
    background-color: #dce0dc;
}

.parent-card{
    overflow-x: scroll;
    margin: 40px 80px;
    height: 180px;
    padding: 15px 0px;
}

.parent-card::-webkit-scrollbar{
    height: 0px;
}


.parent-card .small-card{
    justify-content: center;
    margin: 10px 30px 10px 20px;
    background-color: var(--white);
    animation: scroll infinite ease-in-out 12s;
}

.parent-card .small-card a{
    text-decoration: none;
    color: black;
    text-align: center;
    font-size: 10px;
}

.parent-card .small-card img{
    height: 100px;
    margin: 5px;
}

@keyframes scroll{
    0%{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(-127%);
    }
    50%{
        transform: translateX(-255%); 
    }
    75%{
        transform: translateX(-382%); 
    }
    80%{
        transform: translateX(0%);
    }
}

.product-list{
    flex-direction: column;
    position: relative;
}

.product-list a{
    padding: var(--pad);
    margin-bottom: 60px;
    text-align: right;
    color: var(--color);
}

li{
    list-style: none;
}

.list{
    padding: var(--pad);
    margin: 20px 0px;
    justify-content: space-evenly;
}

.list ul{
    width: 25%;
}

.list ul li{
    line-height: 30px;
}


/*@media(max-width: 1440px){*/
/*    .hero{*/
/*        height: 400px;*/
/*    }*/
/*}*/

@media(max-width: 1024px){
    /* .text-card{

    } */


    .hero{
        height: 500px;
        width: 100%;
        background-size: cover;
    }

    .text-card .text{
        padding: 0px;
    }

    .card1 {
        justify-content: center;
    }

    .card1 .image{
        width: 750px;
        padding: 20px;
    }
    .card1 .text{
        width: 100%;
        padding: 0px 30px 30px 30px;
    }

    .benefit{
        padding: 0px 30px;
        flex-wrap: wrap;  
    }

    .news{
        padding: 0px ;
    }

    .scroller{
        padding: 0px;
    }
    
    .product-list a{
        padding: 0px 30px;
        
    }

    .list{
        padding: 0px;
    }

    .hero .hero-text{
        padding: 110px;
        width: 75%;
    }

}

@media(max-width: 768px) {

    .hero{
        height: 400px;
        width: 100%;
        background-size: cover;
        background-position: center;
    }

    .text-card{
        padding: 0px 80px;
        margin: 40px 0px;
    }

    .text-card .text{
        font-size: 20px;
    }

    .articles .article{
        width: 100%;
    }

    .highlighted-article{
        width: 100%;  
        padding: 20px 80px; 
        margin: 0px 80px;
    }

    .list{
         flex-wrap: wrap;   
         padding: 0px 30px;
    }
    
    .list ul{
        width: 50%;
        margin: 20px 0px;
    }

    .benefits{
        justify-content: center;
        width: 50%;
        margin: 10px 0px;
    }

    .hero .hero-text{
        padding: 80px;
        width: 80%;
    }
}


@media(max-width: 576px) {

    .hero{
        height: 350px;
        width: 100%;
        background-size: cover;
        background-position: center;
    }

    .text-card{
        padding: 0px 30px;
        margin: 30px 0px;
    }

    .text-card .text{
        padding: 0px;
        font-size: 16px;
    }

    .card1 {
        justify-content: center;
        padding: 0px 30px;
    }

    .card1 .image{
        width: 100%;
        padding: 20px;
    }
    .card1 .text{
        width: 100%;
        padding: 0px 30px 30px 30px;
    }

    .card2 .image{
        width: 100%;
    }
    
    .card2 .text{
        align-items: center;
        width: 100%;
    }

    .card2 .para{
        width: 100%;
    }
    .articles .article{
        width: 100%;
    }

    .highlighted-article{
        width: 100%;  
        margin: 0px 0px;      
    }

    .news{
        margin: 40px;
    }

    .news .news-articles{
        width: 100%;
    }

    .list{
        flex-wrap: wrap;   
        padding: 0px 30px;
        justify-content: center;
    }
    
    .list ul{
        width: 100%;
        margin: 20px 0px;
    }

    .benefit{
        margin: 40px 0px;
    }

    .benefits{
        justify-content: center;
        width: 50%;
        margin: 10px 0px;
    }

    .hero .hero-text{
        padding: 50px;
        width: 100%;
    }

    .hero .hero-text h4{
        font-size: 20px;
    }

    .hero .hero-text p{
        font-size: 15px;
    }

    .hero .hero-text .button{
        font-size: 12px;
        padding: 10px 30px;
    }
}


/* END */