/* Media query for responsiveness */
        
        @media (max-width: 768px) {
            header {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 5px;
                margin: 1px;
                max-width: 768px;
                /* justify-content: space-evenly; */
                /* align-self: center; */
                place-content: space-around;
                align-items: baseline;
                gap: 22rem;
            }
            .logo {
                margin-bottom: 20px;
                font-size: 1rem;
            }
            .logo a {
                font-size: 1rem;
            }
            nav ul {
                flex-direction: row;
            }
            nav ul li {
                margin-bottom: 10px;
                margin-right: 0;
                font-size: 19px;
            }
            .top-cont h3 {
                font-size: 3rem;
                padding: 25px 0 0 0;
            }
            .top-cont h6 {
                font-size: 1.5rem;
                padding: 25px 0 0 0;
            }
            .blog-list {
                width: auto;
            }
        }
        
        @media screen and (max-width:425px) and (max-width: 767px) {
            header {
                margin: 1px;
                max-width: 425px;
                justify-content: space-around;
                align-self: center;
                place-content: space-around;
                align-items: baseline;
                gap: 3rem;
            }
            nav ul li a {
                font-size: 10px;
            }
            .top-cont {
                align-items: center;
                max-width: 270px;
                /* border: 1px solid beige; */
                padding: 1rem;
                flex-direction: column;
                gap: 1rem;
                margin: -2rem 0 0 0;
                padding: 1rem 0 0 0;
            }
            .top-cont h3 {
                font-size: 1rem;
            }
            .top-cont h6 {
                margin: -2.5rem 0 0 0;
                font-size: 0.8rem;
            }
            .blog-list {
                width: 340px;
                position: relative;
            }
            .blog-card {
                margin: 20px;
                padding: 5px 5px;
                height: 3rem;
                border-radius: 10px;
            }
            .blog-list .blog-card h3 a {
                position: relative;
                margin: 10px 0 0 0;
                font-size: 0.8rem;
                top: 0rem;
                padding: 4px;
            }
            .blog-tag {
                background-color: #fcba28;
                padding: 3px 2px;
                border: 1px solid;
                /* width: 1rem; */
                margin: -12px 0 -15px 6px;
                border-radius: 1rem;
                font-size: 0.6rem;
                font-weight: 400;
                font-family: Paytone One, sans-serif;
                color: var(--brand-gray);
                text-align: center;
                position: relative;
            }
        }