/* start main */



div#main-container{
    /* position: relative; */
    /* background-color: yellow; */
    margin-bottom: 100px;
    /* overflow: hidden; */
    /* height: 100vh; */
}
div#main-container div#parts-carousel{
    background-color:white ;
    /* padding: 100px 0; */

}
div#main-container div.background-img{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    /* overflow: hidden; */

}
div#main-container div.background-img>img{
    position: absolute;
    top: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 2s;
    object-fit: cover;
}
div#main-container div.background-img>img.imgZoomIn{
    visibility: visible;
    opacity: 1;
    transition: all 2s;
    animation:  imgZoomIn 15s linear infinite;
    /* animation-fill-mode: both; */

}
@keyframes imgZoomIn {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
}
/* @keyframes imgVisible {
    0% {opacity: 0;}
    1%{opacity: 1;}
    99%{opacity: 1;}
    100% {opacity: 0;}
} */

div#main-container div.background-img-shade{
    background-image: linear-gradient(rgba(255, 0, 0, 0), rgb(255, 255, 255) 50%);
    position:absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}


/* start main-----departmans */



div#main-container div#parts-carousel{
    margin-top: -400px;
    height: 50vh;
    display: flex;
    flex-direction: column;
    gap: 20px;


}
div#main-container div#parts-carousel div.departmans-header{
    /* background-color: rgba(255, 0, 0, 0.107); */
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 10px;
    z-index: 3;
    position: relative;
}
div#main-container div#parts-carousel div.departmans-header>button{
    padding: 10px 20px;
    background-color: rgba(255, 255, 0, 0);
    border: none;
    transition: all .3s;
    color: #444;
    font-size: 18px;

}
div#main-container div#parts-carousel div.departmans-header>button.but-hover{
    transform:scale3d(1.2,1.2,1.2);
    transition: all .3s;
    color: #222;


}
div#main-container div#parts-carousel div.departmans-header>button.but-clicked{
    transform:scale3d(1.2,1.2,1.2);
    color: #222;

}
div#main-container div#parts-carousel div.departmans{
    text-align: center;
    width: 100vw;
    margin: 0 auto;
    /* padding: 50px 0; */
    /* height: 30030px; */
    /* background-color: blue; */
    /* height: 50vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin: 20px; */
    position: absolute;
    
    /* position: absolute; */
    visibility: hidden;
    opacity : 0; 
    transition: all .3s;
    z-index: 3;
}
div#main-container div#parts-carousel div.departmans.dep-show{
    visibility: visible;
    opacity : 1; 
    transition: all .3s;

}

/* div#main-container div#parts-carousel div.dep-amozesh{
    top: 50vh;
    transition:top .5s;
}
div#main-container div#parts-carousel div.dep-amozesh-show{
    visibility: visible;
    opacity: 1;
    top: 40vh;
    transition:all 1s .2s;
}

div#main-container div#parts-carousel div.dep-parvaresh{
    top: 65vh;
    transition:top .5s;
}
div#main-container div#parts-carousel div.dep-parvaresh-show{
    visibility: visible;
    opacity: 1;
    top: 55vh;
    transition:all 1s .2s;

} */


div#main-container div#parts-carousel div.departmans>div.dep-car{
    width: 50vw;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
}
div#main-container div#parts-carousel div.departmans>div.dep-car .owl-item{
    height: 200px;
    /* background-color: red; */
}
div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    opacity: .95;
    transform: scale3d(.9,.9,.9);
    transition: all .3s;

}
div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content:hover{
    opacity: 1;
    transform: scale3d(1,1,1);
    transition: all .3s;
}
/* div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content.car-content-animate{
    transform: scale3d(1,1,1);
    transition: all .3s;

} */
div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content div.dep-car-con-bg{
    height: 100%;
}
div#main-container div#parts-carousel div.depatrmans>div.dep-car div.dep-car-content div.dep-car-con-bg>a{
    height: 100%;
    background-color: rgb(128, 0, 255); 
    display: block; 
    position: relative;
}
div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content div.dep-car-con-bg img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;

}
div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content div.dep-car-con-bg div.dep-car-bg-shade{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;

}
div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content div.dep-car-con-title{
    position: relative;
    bottom: 0;

}
div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content div.dep-car-con-title>a{
    display: block;
    padding: 10px;
    text-align: center;
}
div#main-container div#parts-carousel div.departmans>div.dep-car div.dep-car-content div.dep-car-con-title>a>h5{
    font-size: 15px;
    color: #333;
}
div#main-container div#parts-carousel div.departmans>div.dep-car div.owl-nav>button.owl-next{
    left: -40px;
}
div#main-container div#parts-carousel div.departmans>div.dep-car div.owl-nav>button.owl-prev{
    right: -40px;
}

div#main-container div#parts-carousel div.departmans>div.dep-car div.owl-nav>button.owl-next,
div#main-container div#parts-carousel div.departmans>div.dep-car div.owl-nav>button.owl-prev{
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 40%;
    height: 50px;
    border-radius: 100%;
    font-size: 45px;
    color: black;
    
}


/* finish main-----departmans */


/* finish main */