header {
    background-color: var(--alt-white);
}

.blog-head-section {
    width: 100%;
    background: var(--background-color-4);
    height: 270px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5em;

    .blog-head-title {
        font-family: var(--secondary-font);
        font-size: 2.5em;
        color: var(--alt-black);
        font-weight: bold;
    }

    .blog-head-description {
        font-family: var(--secondary-font);
        color: var(--alt-black);
        font-size: 1.2em;
        width: 60%;
        text-align: center;
    }
}

.search-section {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 3em 0;
    background: var(--background-color-5);

    .search-tag-container {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        gap: 1em;

        .search-tag {
            border-radius: 20px;
            border: solid 1px var(--alt-black);
            color: var(--alt-black);
            padding: .5em 2em;
            font-family: var(--secondary-font);
            text-decoration: none;

        }
    }

    .search-bar-wrapper {
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        align-items: center;
        outline: solid 1px var(--gray-text);

        i {
            margin: 0 .5em;
            font-size: 1.2em;
            padding: .4em;
            color: var(--alt-black);
        }

        input {
            background: transparent;
            padding: .7em 1em;
            width: 300px;
            outline: none;
            border: none;
            font-size: 1.1em;
            font-family: var(--secondary-font);
            color: var(--alt-black);
        }

        button {
            background: var(--glass-black);
            padding: .8em 1.5em;
            color: white;
            font-family: var(--secondary-font);
            font-size: 1.1em;
        }
    }
}

.featured-blog-container {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    flex-wrap: wrap;
    gap: .5em;
    padding: 2em .5em;



    .blog-card {
        overflow: hidden;
        position: relative;
        flex: 1 1 280px;
        max-height: 300px;
        min-height: 300px;
        height: 300px;

        img {
            width: 100%;
            min-height: 100%;

            /* padding: .5em; */
            filter: brightness(60%);
        }


        p {
            position: absolute;
            bottom: 1em;
            color: white;
            padding: 1em;
            font-family: var(--primary-font);
            font-size: 1.3em;
            font-weight: 300;
        }
    }
}


.blog-section {
    width: 100%;
    display: grid;
    grid-template: auto auto / 100%;
    height: auto;
    padding: 0 4em;

    .blog-header {
        display: flex;
        align-items: center;
        padding: 3em 0;
        gap: 1em;

        .blog-author-profile {
            width: 120px;
            height: 120px;
            border-radius: 50%;
        }

        div {
            display: flex;
            flex-direction: column;
            align-items: space-evenly;
            gap: 1em;

            .author-detail {

                display: flex;
                align-items: center;
                gap: 1em;

                .author-name,
                .author-profession {
                    font-family: var(--primary-font);
                    color: var(--gray-text);
                }

                .dot-partition {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: var(--gray-text);
                }
            }

            .blog-title {
                font-family: var(--primary-font);
                color: var(--alt-black);
                font-weight: bold;
                font-size: 2em;
            }
        }
    }

    .blog-content {
        width: 100%;
        display: grid;
        grid-template: 100% / 25% 75%;


        .blog-contents-table {
            list-style: none;
            display: flex;
            gap: 2em;
            flex-direction: column;

            .blog-contents-table-title {
                font-family: var(--secondary-font);
                color: var(--alt-black);

            }

            ul {
                list-style: none;
                display: flex;
                flex-direction: column;
            }

            .blog-content-table-items {
                font-family: var(--secondary-font);
                text-decoration: none;
                color: var(--gray-text);
                padding: 1.5em .5em;
                display: flex;
                align-items: center;
                border-left: 2px solid var(--primary-color);
                position: relative;
                transition: .3s;
            }

            .blog-content-table-items::before {
                content: '';
                top: 0;
                position: relative;
                left: 0;
                width: 10px;
                height: 10px;
                background: var(--primary-color);
                border-radius: 50%;
                transform: translateX(-14px);
            }

            .blog-content-table-items:hover {
                text-decoration: underline;
            }
        }

        .blog-paragraph-container {
            display: flex;
            flex-direction: column;
            gap: 2em;

            ul {
                list-style: none;
                display: flex;
                gap: 2em;
                flex-direction: column;

                li {
                    display: flex;
                    flex-direction: column;
                    gap: 1em;
                    font-family: var(--primary-font);


                }
            }

            .blog-paragarph-heading {
                font-size: 1.4em;
                color: var(--alt-black);
            }

            .blog-paragraph {
                line-height: 1.7;
                color: var(--gray-text);
                font-weight: 500;
            }

        }

        .blog-control {
            display: flex;
            justify-content: space-evenly;
            padding: 1em 2em;
            margin-bottom: 2em;

            div {
                display: flex;
                gap: 1em;
                color: var(--alt-black);
                font-family: var(--secondary-font);
            }

            div:first-child>i {
                color: var(--primary-color);
            }

            div>i {
                font-size: 1.5em;
                cursor: pointer;

            }
        }



    }

    .blog-content>div {
        width: 100%;
        height: 100%;
    }
}

.blog-section>div {
    width: 100%;
    height: 100%;
}



@media screen and (max-width: 1368px) {}

@media screen and (max-width: 1100px) {
    .search-section .search-tag-container>a:last-child {
        display: none;
    }
}

@media screen and (max-width: 992px) {
    .search-section .search-tag-container {
        display: none;
    }

    .blog-head-section {
        font-size: .9em;

    }
}

@media screen and (max-width: 768px) {
    .blog-head-section {
        font-size: .8em;

        .blog-head-description {
            width: 80%;
        }
    }

    .blog-control {
        display: none !important;
    }

    .blog-section {
        font-size: .7em;
        .blog-header {
            font-size: .8em !important;
        }

        .blog-author-profile {
            width: 90px !important;
            height: 90px !important;
        }
    }
    
    .blog-content-table-items::before {
        left: 1.5px !important;
    }
}

@media screen and (max-width: 576px) {
    .blog-head-section {
        font-size: .7em;
        height: 160px;
        
        .blog-head-description {
            width: 70%;
        }
    }

    .search-bar {
        width: 200px !important;
        padding: .6em 0 !important;
    }

    .search-bar-wrapper {
        font-size: .9em;

        button {
            padding: .6em 1em !important;
        }
    }

    .blog-content {
        grid-template: auto auto / 100% !important;
        gap: 3em;
        font-size: 1.3em;
        text-align: justify;
    }
    .blog-header {
        flex-direction: column;
        gap: 2em !important;

        .blog-author-profile {
            width: 200px !important;
            height: 200px !important;
        }

        .author-detail {
            font-size: 1.5em;
        }
    }

    .blog-section {
        padding: 0 3em !important;
    }

    .blog-content-table-items::before {
        left: 1px !important;
    }
}

@media screen and (max-width: 400px) {
    .blog-head-section {
        font-size: .65em;
    }

    .search-bar {
        width: 160px !important;
        padding: .6em 0 !important;
    }
}

@media screen and (max-width: 340px) {
    .blog-head-section {
        font-size: .55em;
    }
}