@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #17202a;
    --dark-primary-color: #10161d;
    --secondary-color: #f2b10d;
    --selection-color: #af7e00;
    --shadow-color: #9d9fb3;
    --label-color: #ced4da;
    --transparent-color: #b1b8ca;
    --white-color: #fbfbfb;
    --black-text-color: #333740;
    --light-blue-transparent-color: rgba(40, 53, 64, 0.5);
}

/* Scrollbar Start */
.scroll__style {
    /* max-height: 750px; */
    overflow-y: scroll;
}

.scroll__style::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar {
    width: 5px;
    background-color: rgb(51, 51, 51);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 10px;
}

body {
    margin: 0 auto;
    background-color: #000f1b;
    background-image: url("../../images/mainPage/hero-bg-img.webp"),
        linear-gradient(
            135deg,
            #000000 0%,
            #000000 22%,
            #000f1b 49%,
            #000f1b 75%
        );

    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow-x: hidden;
}

.blog-section {
    display: grid;
    grid-template-columns: 2fr 10fr;
    gap: 40px;
}

.blog-categories {
    font: 400 16px "Lato", sans-serif;
    text-transform: capitalize;
    text-align: start;
}

.blog-categories__item {
    display: block;
    color: var(--shadow-color);
    background-color: var(--primary-color);
    border-radius: 10px;
    box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    margin: 0px 5px 15px;
    width: fit-content;
    transition: all 0.3s linear;
    cursor: pointer;
}

.blog-categories__item:hover {
    transform: translateY(5px);
}


.blog-cards {
}

.blog-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-bottom: 50px;
    padding: 40px;
    gap: 40px;
    text-align: start;
    max-width: 1000px;
    border-radius: 6px;
    background-color: var(--light-blue-transparent-color);
}

.blog-card__image img {
    border-radius: 10px;
}

.blog-card__content {
    position: relative;
}

.blog-card__action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.blog-card__action .fa-chevron-right {
    transition: all 0.3s linear;
}

.blog-card__action a:hover .fa-chevron-right {
    transform: translateX(10px);
}

.blog-card__subtitle,
.blog-card__subtitle span {
    font: 400 16px "Lato", sans-serif;
    color: var(--shadow-color);
    margin-bottom: 10px;
}

.blog-card__subtitle span,
.blog-page__tag {
    background-color: var(--primary-color);
    border-radius: 10px;
    box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
}

.blog-categories__item.active,
.blog-categories__item:hover {
color: var(--secondary-color);
}


.js-read-time span {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.blog-card__title {
    font: 700 26px "Lato", sans-serif;
    color: var(--white-color);
    margin-bottom: 10px;
    margin-top: 15px;
}

.blog-card__description--wrapper {
    margin-bottom: 50px;

}

.blog-card__description {
    font: 400 18px "Lato", sans-serif;
    color: var(--label-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-bottom: 50px;
}

.fa-clock {
    margin-right: 10px;
}

.blog-page-container__wrapper {
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
}

.blog-page__content {
    font: 400 16px "Lato", sans-serif;
    color: var(--shadow-color);
    line-height: 1.5rem;
}

.author-box {
    display: grid;
    grid-template-columns: 50px 100px;
    gap: 10px;
    justify-content: center;
    margin:15px 0 10px ;
}

.author-box__info {
    font: 400 14px "Lato", sans-serif;
    color: var(--shadow-color);
    display: block;
    align-self: center;
}

.author-box__info div:first-child {
    color: var(--selection-color);
}

.author-box__info div:nth-child(2) {
    font-weight: 600;
}

hr {
    margin: 12px 0;
        height: 3px;
        background-color: var(--shadow-color);
        border: none;
}

.main-container__subcontent {
    font: 400 16px "Lato", sans-serif;
    color: var(--label-color);
    margin-top: 20px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;

}

.pagination > li > a,
.pagination > li > span {
    color: var(--label-color);
    background-color: var(--primary-color);
    border-color:var(--dark-primary-color);
}

.pagination > li:hover > a,
.pagination > li:hover > span,
.pagination > li:focus > a,
.pagination > li:focus > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover {
    color: var(--secondary-color);
    background-color: var(--primary-color);
    border-color:var(--dark-primary-color);
    box-shadow: none;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    color: var(--secondary-color);
    background-color: var(--dark-primary-color);
    border-color:var(--dark-primary-color);
}

@media screen and (max-width: 1024px) {
    .blog-section {
        display: block;
    }

    .blog-categories {
        display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }

    .blog-cards {
        margin-top: 30px;
    }
}

@media screen and (max-width: 700px) {
    .blog-card {
        display: block;
    }

    .blog-card__content {
        margin-top: 50px;
    }

    .blog-card__action {
        position: inherit;
    }

    .blog-card__title {
        font: 700 24px "Lato", sans-serif;

    }

    #blog-page .main-container__title,
    #blog-page .author-box {
        text-align: start;
        justify-content: flex-start;
    }
}