.banner-image {
    position: relative;

    &::before {
        content: "";
        background-color: rgba(0, 0, 0, 0.35);
        width: 100%;
        height: 100%;
        position: absolute;
    }

    img {
        height: 436px;
        width: 100%;

        @media screen and (max-width:768px) {
            height: 516px;
            object-fit: cover;
        }
    }

    .title {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 16px;

        h2 {
            font-size: 32px;
            font-weight: 700;
            font-family: $font-family-sora;
            color: $color-text-white;
            margin-bottom: 24px;

            @media screen and (max-width:768px) {
                margin-bottom: 8px;
            }
        }

        p {
            font-size: 18px;
            font-weight: 500;
            color: $color-text-white;
            margin-bottom: 0;
        }
    }
}

.listing-contents {
    padding: 96px 0 80px 0;
    position: relative;

    @media screen and (max-width:992px) {
        padding: 140px 0 156px 0;
    }

    @media screen and (max-width:767px) {
        padding: 56px 0 890px 0;
    }

    // @media screen and (max-width:320px) {
    //     padding: 140px 0 800px 0;
    // }
    .listing-grid-main {
        .grid-first {
            display: grid;
            grid-auto-columns: auto;
            grid-gap: 30px;
            grid-auto-rows: 320px;
            padding-bottom: 40px;

            @media screen and (max-width:992px) {
                grid-auto-rows: 214px;
            }

            @media screen and (max-width:767px) {
                grid-gap: 0;
                padding-bottom: 28px;
                grid-auto-rows: 312px;
            }

            .grid-item {

                &.card-large {
                    width: 854px;

                    @media screen and (max-width:1366px) {
                        width: 734px;
                    }

                    @media screen and (max-width:1024px) {
                        width: 612px;
                    }

                    @media screen and (max-width:992px) {
                        width: 454px;
                    }

                    @media screen and (max-width:767px) {
                        width: 100%;
                    }
                }

                &.news-card {
                    grid-row: 1/2;
                    grid-column-start: 2;

                    @media screen and (max-width:767px) {
                        position: absolute;
                        bottom: 208px;
                        margin-right: 12px;
                    }
                }
            }
        }

        .grid-second {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            grid-gap: 30px;
            grid-auto-rows: 324px;
            padding-bottom: 40px;

            @media screen and (max-width:1024px) {
                grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            }

            @media screen and (max-width:992px) {
                grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
                grid-auto-rows: 214px;
            }

            @media screen and (max-width:767px) {
                grid-gap: 28px;
                padding-bottom: 28px;
                grid-auto-rows: 312px;
            }
        }

        .grid-third {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            grid-gap: 30px;
            grid-auto-rows: 324px;
            padding-bottom: 40px;

            @media screen and (max-width:1024px) {
                grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            }

            @media screen and (max-width:992px) {
                grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
                grid-auto-rows: 214px;
            }

            @media screen and (max-width:767px) {
                grid-gap: 28px;
                padding-bottom: 28px;
                grid-auto-rows: 312px;
            }
        }
    }





    .nav-list-flex {
        display: flex;
        flex-direction: row;
        margin-bottom: 58px;

        @media screen and (max-width:768px) {
            overflow-y: hidden;
            margin-bottom: 24px;
        }

        .nav-link {
            font-size: 18px;
            font-weight: 600;
            color: $color-dark;
            padding: 0;
            margin-right: 32px;
            cursor: pointer;
            white-space: nowrap;

            @media screen and (max-width:768px) {
                margin-bottom: 8px;
                font-size: 16px;
            }

            &.active {
                color: $color-primary;
                background-color: transparent;
                position: relative;

                &::before {
                    content: "";
                    border-bottom: 2px solid $color-primary;
                    position: absolute;
                    width: 100%;
                    bottom: -8px;
                    left: 0;
                }
            }
        }
    }

    .form-blog {
        // @media screen and (max-width:1023px) {
        //     position: absolute;
        //     top: 56px;
        //     width: calc(100% - 68px);
        // }

        // @media screen and (max-width:767px) {
        //     position: absolute;
        //     top: 56px;
        //     width: calc(100% - 24px);
        // }

        .form-group {
            width: 206px;
            display: flex;
            margin: 0 0 43px auto;

            @media screen and (max-width:768px) {
                width: 100%;
            }
        }
    }

    .blog-listing-card {
        display: block;
        // margin-bottom: 40px;

        @media screen and (max-width:768px) {
            // margin-bottom: 28px;
        }

        .card-img {
            height: 250px;
            position: relative;
            overflow: hidden;
            border-radius: 8px;

            @media screen and (max-width:992px) {
                height: 152px;
            }

            @media screen and (max-width:767px) {
                height: 250px;
            }

            img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
                transition: transform 1s cubic-bezier(.25, .46, .45, .94);
                object-fit: cover;
            }

            span {
                font-family: $font-family-sora;
                font-size: 16px;
                font-weight: 600;
                color: $color-text-white;
                position: absolute;
                top: -1px;
                left: -1px;
                padding: 4px 24px;
                backdrop-filter: blur(140px);
                border-bottom-right-radius: 8px;
                border: 0.5px solid rgba(255, 255, 255, 0.6);
                background-image: url(../../../assets/img/enterprise/noise-bg.png), linear-gradient(120deg, #464646 43%, rgba(255, 255, 255, 0) 100%);
                background-size: cover;

                @media screen and (max-width:767px) {
                    font-size: 14px;
                }
            }
        }

        h6 {
            font-size: 18px;
            font-weight: 600;
            font-family: $font-family-sora;
            color: $color-dark;
            height: 44px;
            overflow: hidden;
            margin: 16px 0 0 0;

            @media screen and (max-width:768px) {
                height: 45px;
            }
        }

        &:hover {
            .card-img {

                img {
                    transition: transform 2s cubic-bezier(.25, .46, .45, .94);
                    transform: scale(1.1);
                }
            }

            h6 {
                color: $color-primary;
            }
        }
    }

    .news-letters {
        box-shadow: 0 0 50px -10px rgba(0, 0, 0, 0.25);
        background-color: $color-secondary;
        border-radius: 8px;
        padding: 32px 16px 40px 16px;

        // @media screen and (max-width:1023px) {
        //     position: absolute;
        //     bottom: 236px;
        //     width: calc(100% - 72px);
        // }

        // @media screen and (max-width:767px) {
        //     margin-top: 8px;
        //     bottom: 184px;
        //     margin-right: 12px;
        //     width: auto;
        // }

        // @media screen and (max-width:320px) {
        //     bottom: 198px;
        // }

        h3 {
            font-family: $font-family-sora;
            font-weight: 700;
            color: $color-text-white;
            margin-bottom: 16px;

            @media screen and (max-width:992px) {
                font-size: 16px;
            }

            @media screen and (max-width:767px) {
                font-size: 24px;
            }
        }

        .footer-form {
            .form-group {
                .form-label {
                    color: $color-grey;

                    @media screen and (max-width:992px) {
                        font-size: 12px;
                    }
                }

                .input-group-btn {
                    .btn-sub {
                        top: 56px;
                    }
                }
            }
        }

        .img {
            margin-top: 84px;
            text-align: center;

            // @media screen and (max-width:992px) {
            //     margin-top: 40px;
            // }

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

                @media screen and (max-width:1023px) {
                    width: 79%;
                }

                @media screen and (max-width:767px) {
                    width: 100%;
                }
            }
        }
    }

    .view-more-wrap {
        @media screen and (max-width:992px) {
            bottom: 44px;
            position: absolute;
            width: calc(100% - 70px);
        }

        @media screen and (max-width:767px) {
            bottom: 54px;
            width: calc(100% - 24px);
        }

        @media screen and (max-width:320px) {
            bottom: 44px;
        }
    }
}