/* ------ Category LIST COMPONENT  ------- */

#CategoryList {
    padding-top: 2.5%;
}




#CategoryList .container-fluid {
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

/*    #CategoryList .PageTitle {
        padding-top: 1%;
        padding-bottom:2%;
    }

        #CategoryList .PageTitle h1 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.8em;
            font-weight: 500;
            color: black;
            letter-spacing: 2px;
        }*/


#CategoryList .Category .CardBox {
    padding: 30px;
}

#CategoryList .Category .Card {
    /*  box-shadow: 0 1px 3px 1px rgba(0, 0, 0,0.3);
    border: 1px solid grey;
    border-radius: 8px;*/
    /*border: 1px solid grey;*/
}

    #CategoryList .Category .Card .Image {
        position: relative;
        width: 100%;
        /*height: 500px;   27-11-2024 revision*/
        height: auto;
        /* background-color: #FFFFFF;
        border-radius: 8px 8px 0 0;*/
        text-align: center;
    }

        #CategoryList .Category .Card .Image a {
            text-decoration:none;
            width:100%;
            height:100%;
            position:relative;
        }

            #CategoryList .Category .Card .Image a .HoverDetailButton {
                position: absolute;
                top: 80%;
                left: 50%;
                transform: translate(-50%,-50%);
                background-color: rgba(256, 256,256, 0.7);
                color: #000;
                padding: 9px 18px;
                border-radius: 8px;
                opacity: 0;
                border:1px solid black;
            }


        #CategoryList .Category .Card .Image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
  
        }

        #CategoryList .Category .Card .Image .DiscountRate {
            position: absolute;
            right: 3px;
            top: 3px;
            padding: 6px 8px;
            background-color: #00577F;
            color: #fff;
            border-radius: 6px;
            font-size: 1em;
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
        }


    #CategoryList .Category .Card .Content {
        padding-top: 20px;
    }


        #CategoryList .Category .Card .Content .Text h1 {
            font-size: 1em;
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            height: auto;
            color: #12110e;
            letter-spacing:3px;
        }

        #CategoryList .Category .Card .Content .Text h4 {
            font-size: 1.3em;
            font-family: "Playfair Display", serif;
            font-weight: 600;
            text-align: center;
        }




#CategoryList .Button .DetailButton {
    width: 50%;
    background: transparent;
    color: #12110e;
    border-radius: 6px;
    text-transform: none !important;
    font-family: 'Poppins', sans-serif;
    display:none;
}


#CategoryList .Button .DetailButton:hover {
    background: #62bcaf;
    color: #fff;
}


    #CategoryList .Category .Card .Image:hover a .HoverDetailButton {
        top: 50%;
        opacity: 1;
        transition: 0.2s ease-in;
    }

    #CategoryList .Category .Card .Image:hover img {
        opacity: 0.7;
    }


@media only screen and (max-width: 1700px) {
 /*   #CategoryList .Category .Card .Image {
        height: 450px;  27-11-2024 revision
    }*/
}

@media only screen and (max-width: 1550px) {
    #CategoryList .container-fluid {
        width: 100%;
    }

    /* #CategoryList .Category .Card .Image {
        height: 470px; 27-11-2024 revision
    }*/
}


@media only screen and (max-width: 1460px) {

    /* #CategoryList .Category .Card .Image {
        height: 450px; revision
    }*/

    #CategoryList  {
        padding-top:2%;
    }
}

@media only screen and (max-width: 1200px) {
    /* #CategoryList .Category .Card .Image {
        height: 370px; revision
    }*/
}

@media only screen and (max-width: 780px) {
 

    /*New Revision 25-11-2024*/

    #CategoryList .container-fluid {
        width: 97%;
    }


    #CategoryList .Category .Card .Image {
        width:100%;
        height: auto;
    }

    #CategoryList .Category .CardBox {
        padding: 15px 6px;
    }

    #CategoryList .Category .Card .Content {
        padding-top: 15px;
    }
    #CategoryList .Category .Card .Content .Text {
       padding:0 !important;
    }

        #CategoryList .Category .Card .Content .Text h1 {
            font-size: 1em;
            min-height: 65px;
            letter-spacing: 2px;
        }


    #CategoryList .Button {
        padding:0 !important;
    }

    #CategoryList .Button a{
        padding: 6px 5px !important;
    }




        #CategoryList .Button .DetailButton {
            width: 98%;
            display:block;
        }


        #CategoryList .Button .DetailButton span {
            font-size:1em;
            letter-spacing:0.5px;
        }


    #CategoryList .Category .Card .Image:hover a .HoverDetailButton {
        opacity: 0;
    }

    #CategoryList .Category .Card .Image:hover img {
        opacity: 1;
    }

}