.pogress {
    background-color: red;
    height: 2px;
    width: 100vw;
    animation: pogressing 1s ease-in-out 1;
    /* animation: vanish 1s linear 3s 1; */
    /* display: none; */



}


* {
    margin: 0;
    padding: 0;
}


:root {
    /* --main-bg-color:#2874f0; */
    --main-bg-color: #2874f0;
}

header {
    background: var(--main-bg-color);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


nav ul {
    height: 58px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


nav ul li {
    list-style: none;
    margin: 0px 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.freeTrl {
    position: absolute;
    right: 10px;
    margin: 8px 5px 0px 0px;
    color: #e4ff00;
    font-weight: bold;
}

.form {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}




.container {
    background-color: #e9e9e9d3;
}


nav ul li a:hover {
    color: rgb(55, 55, 192);
    font-size: 18px;
    text-decoration: underline;
    font-weight: bold;
    background-color: rgba(134, 147, 207, 0.692);
}

nav ul li a:active {
    color: red;
}

.bttn:hover {
    background-color: #e4ff00;
    font-weight: bold;
}

.freeTrl:hover {
    color: red;
}

a {
    text-decoration: none;
}

.bblink {
    animation: animate 1.5s step-start infinite;
}

.navallproduct {
    color: white;
    text-decoration: none;
    margin-left: 30px;
    font-weight: bold;
}

.navallproduct:hover {
    font-size: 18px;
    text-decoration: underline;
    font-weight: bold;
    background-color: rgba(134, 147, 207, 0.692);
}


header {
    display: flex;
}

nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.logo {
    display: flex;
    margin: 0px 20px;
}

/* .search{width: 200px;
background-color: red; */
/* } */
.form-ele1 {
    width: 20vw;
    height: 25px;
    margin: 0px 6px 0px 20px;
    border-radius: 6px;
}

.bttn {
    border: 1px solid rgb(149, 151, 11);
    height: 25px;
    width: 70px;
    border-radius: 5px;
    cursor: pointer;
}


@keyframes pogressing {
    0% {
        width: 0vw;
    }

    20% {
        width: 20vw;
    }

    50% {
        width: 60vw;
    }


    100% {
        width: 100vw;
    }

    /* 100%{display: none;} */

}



.slider {
    width: 60vw;
    height: 33VW;
    /* background-color: aqua; */

    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* justify-content: center; */
    /* align-items: center; */
    flex-wrap: wrap;
}

.sliderImg1 {
    /* width="60vw" height="33VW" */
    width: 60vw;
    height: 33VW;
    /* background-color: red; */
    background-image: url("https://placehold.co/600x400");
    /* D:\Win-10\Desktop\SRE project\static\img\image2.jpg */
    background-repeat: no-repeat;
    background-size: 60vw 33VW;
    /* animation: lftSlideIn1 5s ease infinite; */
}



.sliderImg2 {
    /* width="60vw" height="33VW" */
    width: 60vw;
    height: 33VW;
    /* background-color: red; */
    background-image: url("https://placehold.co/600x400");
    /* D:\Win-10\Desktop\SRE project\static\img\image2.jpg */
    background-repeat: no-repeat;
    background-size: 60vw 33VW;
    /* animation: lftSlideIn2 5s ease infinite; */
}



.sliderImg3 {
    /* width="60vw" height="33VW" */
    width: 60vw;
    height: 33VW;
    /* background-color: red; */
    background-image: url("https://placehold.co/600x400");
    /* D:\Win-10\Desktop\SRE project\static\img\image2.jpg */
    background-repeat: no-repeat;
    background-size: 60vw 33VW;
    /* animation: lftSlideIn3 5s ease infinite; */
}


/* .sliderImg1{
    transform: translate(-60vw);
}
.sliderImg2{
    transform: translate(-60vw);
}
.sliderImg3{
    transform: translate(-60vw);
} */



.sliderImg1Ani {
    animation: lftSlideIn1 5s ease 1;
}


.sliderImg2Ani {
    animation: lftSlideIn2 5s ease 5s 1;
}


.sliderImg3Ani {
    animation: lftSlideIn3 5s ease 10s 1;
}


.sliderImg2ExtraAni {
    animation: lftSlideIn2 5s ease 1;
}

.zIndexHigh {
    z-index: 100;
}

.zIndexLow {
    z-index: 10;
}


/* .img2{
    width: 60vw;
    height: 33VW;
} */
/* 
.img2{
    transform: translate(25vw);
}

.img3{
    
    transform: translate(50vw);
} */


@keyframes vanish {

    0% {}

    100% {
        display: none;
    }
}


@keyframes lftSlideIn1 {
    0% {
        transform: translate(60vw);
    }

    /* 50%{transform: translate(-90vw);} */
    40% {
        transform: translate(0vw);
    }

    60% {
        transform: translate(0vw);
    }

    100% {
        transform: translate(0vw);
    }


}

@keyframes lftSlideIn2 {
    0% {
        transform: translate(0vw);
    }

    /* 50%{transform: translate(-90vw);} */
    40% {
        transform: translate(-60vw);
    }

    60% {
        transform: translate(-60vw);
    }

    100% {
        transform: translate(-60vw);
    }

}



/*Done...........*/
@keyframes lftSlideIn3 {
    0% {
        transform: translate(-60vw);
    }

    /* 50%{transform: translate(-90vw);} */
    40% {
        transform: translate(-120vw);
    }

    60% {
        transform: translate(-120vw);
    }

    100% {
        transform: translate(-120vw);
    }

    /* 100%{transform: translate(-120vw);} */

}



.card {
    /* background-color: white; */
    max-width: 90vw;

    margin: auto;
    margin-top: 0px;
    margin-bottom: 60px;
    font-family: sans-serif;



}

.card-items {
    display: flex;
    overflow: scroll;


}

.card-item {
    width: 264px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px 7px;
    border-radius: 8px;



}

.pimg {
    border: 1px solid #ffffff00;
    border-radius: 7px;
    box-shadow: 0 7px 8px rgb(0 0 0 / 0.2);
}

.pimg:hover {
    transform: scale(1.02);
}

.line1 {
    font-weight: bold;
}

.line2 {
    color: black;
    /* font-weight: bold; */
}

.offer {
    color: green;
    font-weight: bold;
}

.priceperlead {
    color: green;
    font-weight: bold;
    font-size: larger;
}

.line3 {
    color: rgb(163, 117, 1);
}


.card h2 {
    font-family: sans-serif;

}

.moreCl {
    text-decoration: none;
}

.nameA {
    text-decoration: none;
    color: navy;
}

#clock {
    width: 8vw;
    position: relative;
    bottom: 30vw;
    left: 90vw;
    color: red;
    font-weight: bold;
    font-size: x-large;
}

@keyframes animate {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
    }
}