:root{
    --pad: 0px 130px;
    --black: #000;
    --white: #fff;
    --link: #848484;
    --bg: #990b6e;
    --margin: 80px 0px;
}
body{
    font-family: 'poppins', sans-serif;
    color: var(--black);
}

.display{
    display: flex;
}

.head{
    height: 120px;
    padding: var(--pad);
    background-color: var(--black);
    justify-content: space-between;
    align-items: center;
}

.catalog{
    padding: var(--pad);
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: hidden;
}

.catalog-items{
    /* color: var(--black); */
    margin: 20px;
    padding: 0px;
    height: 200px;
    width: 30%;
    interpolate-size: allow-keywords;
    /* background-color: #990b6e9a; */
    overflow: hidden;
    border-radius: 5px;
    transition-duration: 500ms;
    position: relative;
}

.ct1{
    height: 1000px;
}

.catalog-items .item-image{
    height: 200px;
    overflow: hidden;
    position: relative;
}


.catalog-items:hover{
    cursor: pointer;
}

.catalog-items img{
    width: 100%;
}

.catalog-items li{
    /*color: var(--whit);*/
    font-size: 16px;
    margin: 10px 40px;
    list-style-type: circle;

}

.itemsOnClick{
    height: fit-content;
    /*overflow-y: scroll;*/
    transition-duration: 800ms;
    border: 0.5px solid grey;
    box-shadow: 0px 0px 8px 0px #707070;
}

.content-scroller ul{
    background-color: var(--white);
    color: var(--black);
}

.catalog-items .items-head{
    background: #990b6ea0;
    position: absolute;
    top: 165px;
    padding: 0px 5px;
    width: 100%;
    text-align: left;
}

.catalog-items .items-head::after{
     content: "\002B";
     position: absolute;
     right: 10px;
}

.catalog-items .items-head1::after{
    content: "\2212";
    position: absolute;
    right: 10px;
}

/*.content-scroller::-webkit-scrollbar{
    width: 2px;  
} */

@media(max-width: 1440px){
 .catalog{
    padding: 0px 80px;
 }   
}

@media(max-width: 1024px){
    .head{
        padding: 0px 50px;
    }

    .catalog{
        padding: 0px 0px;
    }

    .catalog-items{
        width: 30%;
    }

    .catalog-items .items-head{
        position: absolute;
        top: 0px;
    }

}

@media(max-width: 768px){
    .head{
        padding: 0px 50px;
    }

    .catalog{
        padding: 0px 30px;
    }

    .catalog-items{
        width: 45%;
    }

    .catalog-items .items-head{
        position: absolute;
        top: 0px;
    }

}

@media(max-width: 576px){
    .head{
        padding: 0px 30px;
        
    }

    .head .link, li{
        font-size: 12px;
    }

    .catalog{
        padding: 0px 30px;
    }
  
    .catalog-items{
        width: 100%;
    }

    .catalog-items .items-head{
        position: absolute;
        top: 0px;
    }
}