/* bog post css */

 
        .Bolg-Section-Main-Container {
            padding: 0 1rem;
            margin: 0 auto;
            margin-top:75px;
            width: 100%
        }
         body {
  overflow-x: hidden;
}

        @media (min-width:576px) {
            .Bolg-Section-Main-Container {
                max-width: 540px
            }
        }

        @media (min-width:768px) {
            .Bolg-Section-Main-Container {
                max-width: 720px
            }
        }

        @media (min-width:922px) {
            .Bolg-Section-Main-Container {
                max-width: 960px
            }
        }

        @media (min-width:576px) and (max-width:1399.98px) {
            .Bolg-Section-Main-Container {
                max-width: 96%
            }
        }

        @media (min-width:1400px) {
            .Bolg-Section-Main-Container {
                max-width: 1340px
            }
        }

        .Outside-Blog-container {
            margin: 2rem auto
        }

        .Grid-blog-Container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-column-gap: 1.5rem;
            grid-row-gap: 2rem
        }

        @media (max-width:48em) {
            .Grid-blog-Container {
                grid-template-columns: 1fr 1fr
            }
        }

        @media (max-width:36em) {
            .Grid-blog-Container {
                grid-template-columns: 1fr;
                grid-row-gap: 1rem
            }
        }

        .Blog-Main-Title {
            margin: 0 0 .25rem;
            line-height: 1.5rem;
            font-size: 1.125rem;
            color: #151435;
            font-weight: 500;
            font-variation-settings: "wght" 500;
            transition: color var(--hover-duration)
        }

        @media (max-width:500px) {
            .Blog-Main-Title {
            font-size: 16px;
            
             
            }
            
        }

        @media (prefers-color-scheme: dark) {
 
            .Blog-Date {
                color: white;
            }
}

        .dark .Blog-Main-Title {
            color: #fff
        }

        .Blog-container:hover .Blog-Main-Title {
            color: #8c3ed4
        }

        .Blog-Main-Title>:hover,
        .Blog-Main-Title>:visited {
            color: inherit;
            -webkit-text-decoration: none;
            text-decoration: none
        }

        .Blog-Main-Title>:hover {
            -webkit-text-decoration: underline;
            text-decoration: underline
        }

        .Blog-container {
            height: -moz-fit-content;
            height: fit-content;
            position: relative;
            max-height: 10rem;
            height: 10rem;
            overflow: hidden
        }

        .Blog-container>img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover
        }

        @media (max-width:36em) {
            .Blog-container {
                width: 4rem;
                min-width: 4rem;
                height: 100%;
                position: absolute
            }
        }

        .Blog-Post {
            display: flex;
            flex-direction: column;
            border-radius: .5rem;
            background: #fff;
            transition: box-shadow var(--hover-duration), transform var(--hover-duration);
            box-shadow: 0 .25rem .5rem rgba(28, 28, 40, .1), 0 0 .125rem rgba(28, 28, 40, .1);
            overflow: hidden
        }

        .Blog-Post>a {
            display: block;
            height: 100%;
            position: relative
        }

        .Blog-Post>a,
        .Blog-Post>a:hover {
            -webkit-text-decoration: none;
            text-decoration: none
        }

        @media (max-width:36em) {
            .Blog-Post>a {
                display: flex;
                flex-direction: row
            }
        }

        .Blog-Post:hover {
            transform: translateY(-.125rem);
            box-shadow: 0 .5rem 1rem rgba(28, 28, 40, .15), 0 0 .125rem rgba(28, 28, 40, .15)
        }

        .Blog-Post:hover .Blog-Main-Title {
            color: purple
        }

        .Blog-Post:focus {
            border-color: -webkit-focus-ring-color;
            box-shadow: 0 0 0 .3rem rgba(-webkit-focus-ring-color, .75);
            outline: 8px auto -webkit-focus-ring-color;
            outline-offset: 2px
        }

        .Blog-Date {
            margin-bottom: .75rem;
            flex-grow: 0;
            font-size: .9rem;
            color: var(--color-text-light)
        }

        @media (max-width:36em) {
            .Blog-Date {
                margin-bottom: 0
            }
        }

        .Blog-Title-Container {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column
        }

        @media (max-width:36em) {
            .Blog-Title-Container {
                padding-left: 5rem
            }
        }

        .Blog-Extra-Detail {
            margin-bottom: 0;
            line-height: 1.4;
            color: var(--color-text-light)
        }

        @media (max-width:36em) {
            .Blog-Extra-Detail {
                display: none
            }
        }

        .Bolg-Title-Container {
            color: var(--color-text-dark);
            max-width: 56.25rem;
            margin: 0 auto
        }

        .Blog-Title {
            margin: 2rem auto;
            max-width: 32.5rem;
            font-weight: 500;
            font-variation-settings: "wght" 500;
            text-align: center
        }

        .Page-Container {
            width: 110%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
            font-size: 1.125rem;
            text-align: center;
            color: rgba(28, 28, 38, .7);
            padding: .5rem 0;
            margin-left: -5%;
            margin-top: 1rem
        }

        .Other-Pages {
            margin: .2rem;
            padding: .7rem 1.3rem;
            font-weight: 500;
            font-variation-settings: "wght" 500
        }

        .PageSelector_PagePartTextCurrent__6EKsW {
            margin: .6rem;
            padding: .3rem .9rem;
            color: var(--color-background-off-white);
            background: var(--color-brand-standard);
            border-radius: .25rem
        }

        .Another-Page-Key {
            margin: .6rem;
            padding: .3rem .9rem;
            font-weight: 500;
            font-variation-settings: "wght" 500;
            color: rgba(28, 28, 38, .7);
            transition: color .15s ease-in-out
        }

        .Another-Page-Key:hover {
            -webkit-text-decoration: none;
            text-decoration: none
        }

        .Blog-Main-Title>:hover,
        .Blog-Main-Title>:visited {
            color: inherit;
            -webkit-text-decoration: none;
            text-decoration: none
        }

        .Blog-Main-Title>:hover {
            -webkit-text-decoration: underline;
            text-decoration: underline
        }