/* Blog Card ---------------------------------- */
.blog-card {
    background-color: $white-color;
    position: relative;
    z-index: 3;
    border-radius: 30px;
    border: 1px solid #E3E8F5;

    &.style2 {
        border-radius: 20px;

        .box-title {
            font-size: 20px;
        }

        .blog-content {
            padding: 15px 30px 35px 30px;

            @include xl {
                padding: 20px;
            }
        }

        .blog-tags {
            padding-bottom: 10px;
            margin-bottom: 25px;
        }

        .blog-img {
            border-radius: 20px 20px 0px 0px;

            img {
                border-radius: 20px 20px 0px 0px;
            }
        }

        .box-title {
            margin-bottom: 15px;
        }
    }

    .blog-img {
        position: relative;
        border-radius: 30px 30px 0px 0px;
        overflow: hidden;

        &:before {
            position: absolute;
            top: 0;
            left: -100%;
            display: block;
            content: '';
            width: 50%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transform: skewX(25deg);
            z-index: 2;
        }

        img {
            width: 100%;
            border-radius: 30px 30px 0px 0px;
            transition: all 0.4s ease;
        }
    }

    .blog-content {
        padding: 15px 30px 30px 40px;

        @include xl {
            padding: 20px;
        }
    }

    .blog-tags {
        font-size: 12px;
        font-weight: 700;
        color: $theme-color;
        letter-spacing: 0.48px;
        text-transform: uppercase;
        margin-top: -0.3rem;
        padding-bottom: 10px;
        margin-bottom: 25px;
        border-bottom: 1px solid #E1E5EB;
    }

    .box-title {
        font-weight: 600;
        letter-spacing: -0.24px;
        margin-bottom: 5px;

        a {
            background-image: linear-gradient(to left, $theme-color, $theme-color);
            background-repeat: no-repeat;
            background-position: bottom left;
            background-size: 0 2px;
            transition: 0.5s ease-in-out;

            &:hover {
                background-size: 100% 2px;
            }
        }
    }

    &_text {
        margin-bottom: 8px;
    }

    &_profile {
        display: flex;
        gap: 10px;
    }

    &_author {
        min-width: 40px;
        height: 40px;
        border-radius: 50%;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    &_info {
        a {
            font-size: 12px;
            color: $body-color;
            font-weight: 400;
        }
    }

    &_name {
        font-family: $title-font;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.16px;
        margin-bottom: -0.3rem;
    }

    &:hover {
        .blog-img {
            img {
                transform: scale(1.08);
            }

            &:before {
                animation: shine 1.9s;
            }
        }
    }

    .blog-btn {
        border-bottom: 1px solid #E1E5EB;
        margin-bottom: 25px;
        padding-bottom: 30px;
    }

    .line-btn {
        font-family: $body-font;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.16px;
    }
}


@include md {
    .blog-card {
        .box-title {
            font-size: 22px;
        }
    }
}

@include sm {
    .blog-card {
        .blog-content {
            padding: 30px;
        }

        .box-title {
            font-size: 24px;
        }
    }
}

@media (max-width: 410px) {
    .blog-card {
        .box-title {
            font-size: 22px;
        }
    }
}

@media (max-width: 350px) {
    .blog-card {
        .blog-content {
            padding: 18px;
        }

        .box-title {
            font-size: 20px;
        }
    }
}

/* Blog Box ---------------------------------- */
.blog-box {
    position: relative;
    background-color: $white-color;
    padding: 40px;

    @include xl {
        padding: 30px;
    }

    &.style2 {
        background-color: $smoke-color;
    }

    &_content {
        position: relative;
        text-align: center;
        padding-top: 35px;
    }

    .blog-date {
        position: absolute;
        top: -20px;
        left: 50%;
        background: var(--theme-color);
        border-radius: 8px;
        color: var(--white-color);
        font-family: var(--title-font);
        font-weight: 600;
        font-size: 24px;
        line-height: 20px;
        padding: 9px 11.3px;
        display: block;
        transform: translate(-50%, -50%);

        .month {
            font-size: 16px;
            line-height: 16px;
            font-weight: 500;
            display: block;
        }
    }

    .blog-img {
        position: relative;
        overflow: hidden;


        &:before {
            position: absolute;
            top: 0;
            left: -100%;
            display: block;
            content: '';
            width: 50%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transform: skewX(25deg);
            z-index: 2;
        }

        img {
            width: 100%;
            transition: transform .45s cubic-bezier(.4, .87, .56, 1.03);
            transform-origin: 30% 60%;
        }
    }

    .box-title {
        line-height: 34px;
        margin-bottom: 13px;
    }

    .line-btn {
        text-transform: capitalize;
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
    }

    &:hover {
        .blog-img {
            img {
                transform: scale(1.04) rotate(5deg);
            }

            &:before {
                animation: shine 1.9s;
            }
        }
    }
}

/* Blog Grid ---------------------------------- */
.blog-grid {
    background-color: $white-color;

    &.style2 {
        background-color: $white-color;
        display: flex;

        @include sm {
            display: block;
        }

        .blog-content {
            padding: 47px 40px 51px 40px;

            @include vxs {
                padding: 30px;
            }
        }

        .blog-img {
            min-width: 312px;


            @include sm {
                min-width: 100%;

            }
        }
    }

    .blog-img {
        position: relative;
        overflow: hidden;
    }

    .blog-content {
        padding: 47px 40px 40px 40px;

        @include vxs {
            padding: 30px;
        }
    }

    .blog-meta {
        margin: -0.3rem 0 20px 0;
    }

    .blog-tag {
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: $theme-color;
        padding: 9px 20px;
        color: $white-color;
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 0;
    }

    .box-title {
        margin-bottom: 22px;

        a {
            background-image: linear-gradient(to left, $theme-color, $theme-color);
            background-repeat: no-repeat;
            background-position: bottom left;
            background-size: 0 2px;
            transition: 0.5s ease-in-out;

            &:hover {
                background-size: 100% 2px;
            }
        }
    }

    .line-btn:hover i {
        transform: rotate(0deg);
    }

    .blog-img {
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            transition: 0.4s ease-in-out;
        }
    }

    .blog-meta {
        margin: -0.4em 0 18px 0;

        span,
        a {
            @include vxs {
                font-size: 14px;
            }

            >i {
                color: $theme-color;
                font-size: 14px;
            }
        }
    }

    &:hover {
        .blog-img {
            img {
                transform: scale(1.08);
            }
        }
    }
}

.blog-title-area {
    max-width: 613px;
    margin: auto;
    display: block;
    text-align: center;
}

.blog-area {
    position: relative;
    z-index: 2;
    padding: 180px 0 212px 0 ;
    @include md {
        padding: 180px 0 190px 0;
    }

    // .blog-shape {
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    //     width: 100%;
    //     height: 200px;
    //     background-size: auto;
    //     background-repeat: repeat-x;
    //     background-position: top center; 
    //     background-color: $white-color;
    //     z-index: 5;
    // }
    .blog-shape {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 110px;
        background-size: auto;
        background-repeat: repeat-x;
        background-position: bottom center;
        background-color: #001328;
        z-index: 5;
    }
}

.blog-area3 {
    padding: 180px 0 170px 0 !important;  
}