.showDivOnMobileView {
    display: none;
}
/* CSS that should be displayed if width is equal to or less than 1199px goes here */
@media (max-width: 768px) {
    .showDivOnMobileView {
        display: unset;
    }

    .showDivOnDescView {
        display: none;
    }



    /*.navbarHeaderTable {
        width: 100%;
    }*/

}


.sectionHeadingStyle {
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 20px;
    color: #02436b;
    font-family: Poppins;
}



a {
    color: #717171;
    /*color: black;*/
    font-size: 16px;
}

    a:hover {
        color: #46001C;
        /*font-size: 50px;*/
    }

/*Show Product Images Zoom in and Zoom out*/
.zoom {
    transition: transform .2s;
}

    .zoom:hover {
        -ms-transform: scale(1.1); /* IE 9 */
        -webkit-transform: scale(1.1); /* Safari 3-8 */
        transform: scale(1.1);
    }


/*To Solve Column height problem*/
.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}

    .row.display-flex > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }




.circleShapeStyle {
    margin-bottom: 5px;
    width: 145px;
    height: 100%;
    background: #F9DDC6;
    border-radius: 50%;
    padding: 25px;
    padding-bottom: 0px;
}

    .circleShapeStyle img {
        height: 120px;
        width: 100%;
    }

/*Advertise Images*/
.advertiseContainerDiv {
    padding: 0px;
    margin: 0px;
    /*margin-top: 80px;*/
    margin-top: 90px;
    width: 100%
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    height: 325px;
    width: 100%;
}

.CategoryNameStyle {
    padding-left:0px;
}

/* CSS that should be displayed if width is equal to or less than 1199px goes here */
@media (max-width: 1199px) {
    .circleShapeStyle {
        /*width: 50%;
        padding: 0px;
        padding-top: 25px;*/
        width: 250px;
        height:250px;
        padding: 0px;
        padding-top: 25px;
    }

        .circleShapeStyle img {
            /*height: 100px;*/
            height: 200px;
            width: 80%;
        }
}


/* CSS that should be displayed if width is equal to or less than 991px goes here */
@media (max-width: 991px) {
    .circleShapeStyle {
        /*width: 65%;
        padding: 0px;
        padding-top: 25px;*/
        width: 200px;
        height:200px;
        padding: 0px;
        padding-top: 25px;
    }

        .circleShapeStyle img {
            height: 160px;
            width: 80%;
        }
}


/* CSS that should be displayed if width is equal to or less than 768px goes here */
@media (max-width: 768px) {
    /*To show image when screen size is become less and less, remove left and right padding to zero which is added in .circleShapeStyle class : 25px for large screen*/
    .circleShapeStyle {
        width: 210px;
        padding: 20px;
        height:210px;
        padding-top: 25px;
        
    }

        .circleShapeStyle img {
            height: 170px;
            width: 100%;
        }

    /*Advertise Images*/
    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        height: 130px;
        width: 100%;
    }
    /*Only changing top margin from 90px to 70px*/
    .advertiseContainerDiv {
        padding: 0px;
        margin: 0px;
        /*margin-top: 60px;*/
        margin-top: 70px;
        width: 100%
    }

    .CategoryNameStyle {
        padding-left: 10px;
    }
}

/* CSS that should be displayed if width is equal to or less than 480px goes here */
@media (max-width: 480px) {

    .circleShapeStyle {
        width: 119px;
        height:119px;
        padding: 0px;
        padding-top: 10px;
    }

        .circleShapeStyle img {
            height: 95px;
            width: 80%;
        }

    /*Advertise Images*/
    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        height: 180px;
        width: 100%;
    }
}

/* CSS that should be displayed if width is equal to or less than 414px goes here */
@media (max-width: 414px) {

    .circleShapeStyle {
        width: 110px;
        height:110px;
        padding: 0px;
        padding-top: 10px;
    }

        .circleShapeStyle img {
            height: 93.5px;
            width: 85%;
        }

    /*Advertise Images*/
    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        height: 150px;
        width: 100%;
    }
}

/* CSS that should be displayed if width is equal to or less than 375px goes here */
@media (max-width: 375px) {

    .circleShapeStyle {
        width: 120%;
        height:102px;
        padding: 0px;
        padding-top: 10px;
    }

        .circleShapeStyle img {
            height: 85.67px;
            width: 84%;
        }

    /*Advertise Images*/
    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        height: 140px;
        width: 100%;
    }
}

/* CSS that should be displayed if width is equal to or less than 360px goes here */
@media (max-width: 360px) {

    .circleShapeStyle {
        width: 110%;
        height:88px;
        padding: 0px;
        padding-top: 10px;
    }

        .circleShapeStyle img {
            height: 70px;
            width: 80%;
        }

    /*Advertise Images*/
    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        height: 130px;
        width: 100%;
    }
}

/* CSS that should be displayed if width is equal to or less than 320px goes here */
@media (max-width: 320px) {

    .circleShapeStyle {
        width: 111%;
        height:74px;
        padding: 0px;
        padding-top: 10px;
    }

        .circleShapeStyle img {
            height: 60px;
            width: 81%;
        }

    /*Advertise Images*/
    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        height: 120px;
        width: 100%;
    }
}




/* CSS that should be displayed if width is equal to or greater than 768px goes here */
/*@media (min-width: 768px) {
   
}*/