/* Css For Web Story Page */
            body.archive main#main {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                justify-content: start;
            }
            body.archive article {
                width: 100%;
                max-width: 23%;
                margin: 1% 1%;
                position: relative;
                background: #ffffff;
                display: flex;
                flex-wrap: wrap-reverse;
                box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
                border-radius: 10px;
                overflow: hidden;
                transition: all 0.5s;
            }
            body.archive article img {
                aspect-ratio: 1/1 !important;
                width: 100%;
                height: auto;
                padding: 0px;
                object-fit: cover;
                object-position: top;
                margin-top: 0px !important;
                border-radius: 10px 10px 0px 0px;
                transition: all 0.5s;
                min-height: 450px;
            }
            body.archive header.page-header {
                max-width: 100%;
                width: 100%;
                margin: 100px 0px 20px;
            }
            body.archive article h2.entry-title {
                line-height: normal !important;
                font-size: 15px;
                text-transform: capitalize;
                margin-top: 0px;
                margin-bottom: 0px;
            }
            body.archive article h2.entry-title a {
                color: #ffffff;
                height: 100%;
                position: absolute;
                width: 100%;
                left: 0px;
                bottom: 0px;
                padding: 10px !important;
                display: flex;
                align-items: end;
                background: linear-gradient(180deg, rgba(255,255,255,.0) 0%,rgba(0,0,0,.1) 70%, rgb(0 0 0/80%) 85%, rgb(0 0 0) 100%);
            }
            body.archive .entry-content {
                padding: 0px;
                display: none;
            }
            body.archive article:hover a {
                background: #000000c9 !important;
            }
            body.archive article:hover {
                box-shadow: 0 1px 8px rgb(0 0 0 / 70%);
                transform: translateY(-5px);
            }
            body.archive #content div#primary {
                background: transparent;
            }
            body.archive {
                background: linear-gradient(40deg, rgb(5 145 203), rgb(24 44 89));
                background-repeat: no-repeat;
                background-size: 100% 250px !important;
            }
            body.archive h1.page-title {
                visibility: hidden;
                position: relative;
            }
            body.archive h1.page-title:after {
                content: "Web Stories";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                display: block;
                color: #fff;
                font-size: 37px;
                visibility: visible;
            }
            body.archive header.page-header h1 {
                text-align: center;
                color: #fff;
                margin-bottom: 80px;
                font-size: 37px;
                font-weight: 700;
            }
            @media(max-width: 1250px) {
                body.archive main#main {
                    margin-bottom:50px;
                }
            }

            @media(max-width: 768px) {
                body.archive article {
                    width:100%;
                    max-width: 48%;
                    margin: 10px auto;
                }
                body.archive article h2.entry-title {
                    font-size: 18px;
                }
            }

            @media(max-width: 500px) {
                body.archive article {
                    width:100%;
                    max-width: 98%;
                    margin: 10px;
                }
                body.archive header.page-header h1 {
                    margin-bottom: 50px;
                    padding: 20px;
                    margin-top: 0px;
                }
            }

            /* Css End Here For Web Story Page */
			
			  /* web story pagination */
            ul.pagination {
                display: flex;
                justify-content: center;
                align-items: center;
                list-style: none;
                margin: 30px 0 20px
            }
            ul.pagination li.page-item a,ul.pagination li.page-item span {
                padding: 5px 12px;
                margin: 0 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 3px;
                color: #202020;
                border: 1px solid #00000057;
                line-height: 26px;
                font-size: 18px;
                max-height: 35px;
                width: 40px
            }
            ul.pagination li.page-item a:hover {
                border: 1px solid #2391f3;
                color: #2391f3
            }
            ul.pagination li.page-item.active span {
                background: #2391f3;
                color: #fff;
                border-color: #2391f3
            }
            a.next.page-link,ul.pagination li.page-item a.prev.page-link {
                font-size: 30px!important;
                height: 100%;
                vertical-align: middle;
                padding-bottom: 14px!important
            }
            /* web story pagination end*/
