section.blog-wrapper{
    padding: 0 62px;
    padding-top: 90px;
}
section.blog-wrapper .tabcontentblog {
    display: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
} 
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.blog-wrapper .blog-main{
    margin-top: 108.5px;
}
.blog-wrapper .blog-filter{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.blog-wrapper .blog-filter .tab{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 97px;
}
.blog-wrapper .blog-filter .tab .tablinksblog{
    border: none;
    background: transparent;
    color: #111;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 21px */
    letter-spacing: 2px;
    text-transform: uppercase;
}
.blog-wrapper .blog-filter .filter-head p{
    color: #111;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 30px */
    letter-spacing: 2px;
    text-transform: uppercase;
}
.blog-wrapper .blog-main img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transform: scale(1);
    transition: 0.3s all ease;
}
.blog-wrapper .blog-main .blog-img{
    position: relative;
    padding-top: 80%;
    overflow: hidden;
}
.blog-wrapper .blog-main .blog-desp-wrap {
    display: flex;
    flex-direction: column;
    gap: 19px;
}
.blog-wrapper .blog-main .blog-desp-wrap h6{
    color: #111;
    leading-trim: both;
    text-edge: cap;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 106%; /* 25.44px */
    transition: 1s all ease;
}
.blog-wrapper .blog-main .blog-desp-wrap .blog-desp p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #5A5A5A;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}
.blog-wrapper .blog-main .tabcontentblog{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 64px;
    row-gap: 81px;
    padding-left: 90px;
    padding-right: 90px;
}
.blog-wrapper .blog-main .item a{
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.blog-wrapper .blog-main .item:hover .blog-title h6{
    color: #D8031D;
}
.blog-wrapper .blog-main .item:hover .blog-img img{
    transform: scale(1.2);
    transition: 0.8s all cubic-bezier(0.7, 0.03, 0.47, 0.89);
}
.blog-banner-section{
    padding-top: 96px;
    padding-left: 170px;
    background-color: #111;
    height: calc(100vh - 96px);
    min-height: 800px;
    overflow: hidden;
    position: relative;
}
.blog-banner-section .bb-head {
    position: absolute;
    top: 28%;
    max-width: 35ch;
}
.blog-banner-section .bb-head h1{
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-feature-settings: 'ss02' on, 'clig' off, 'liga' off;
    font-size: 90px;
    font-style: normal;
    font-weight: 300;
    line-height: 95.5%; /* 85.95px */
}
.blog-banner-section .bb-head h1 span{
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-feature-settings: 'ss02' on, 'clig' off, 'liga' off;
    font-family: var(--pp);
    font-size: 90px;
    font-style: italic;
    font-weight: 200;
    line-height: 95.5%;
}
.blog-banner-section .blog-title, .blog-banner-section .blog-desp{
    overflow: hidden;
    max-width: 40ch;
}
.blog-banner-section .blog-title p{
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 106%; /* 19.08px */
    transform: translateY(100%);
    opacity: 0;
    transition: 1s all ease;
}
.blog-banner-section .blog-desp p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #F1F1F1;
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    transform: translateY(100%);
    opacity: 0;
    transition: 1s all ease;
    transition-delay: 0.3s;
}
.blog-banner-section .owl-item.active .blog-desp p, .blog-banner-section .owl-item.active .blog-title p {
    transform: translateY(0%);
    opacity: 1;
}
.blog-banner-section .ban-slide-con{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
}
.blog-banner-section .ban-slide-con .ban-slide-txt{
    width: 28%;
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding-bottom: 210px;
}
.blog-banner-section .blog-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
.blog-banner-section .blog-img{
    mask-image: url(../images/blog-banner.svg);
    -webkit-mask-image: url(../images/blog-banner.svg);
    mask-image: url(../images/blog-banner.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    position: relative;
    padding-top: 100%;
    height: 0;
    transform: scale(0);
    opacity: 0;
    transform-origin: bottom right;
    transition: 0.4s all ease;
    transition-delay: 0.1s;
    cursor: url(../images/cursor-eye-white.svg) 0 0, auto;
}
.blog-banner-section .owl-item.active .blog-img{
    opacity: 1;
    transform: scale(1);
    transition: 1s all ease;
    transition-delay: 0.3s;
}
.blog-banner-section .ban-slide-img {
    width: 60%;
}
.blog-banner-section .blog-banner-wrapper{
    height: 100%;
}
.blog-banner-section .blog-banner-wrapper .ban-slider-wrapper, .blog-banner-section .blog-banner-wrapper .ban-slider-wrapper > div{
    height: 100%;
}
.blog-banner-section .blog-banner-wrapper .ban-slider-wrapper .owl-stage-outer{
    height: 100%;
}
.blog-banner-section .blog-banner-wrapper .ban-slider-wrapper .owl-stage-outer .owl-stage{
    height: 100%;
}
.blog-banner-section .blog-banner-wrapper .ban-slider-wrapper .owl-item{
    height: 100%;
}
.blog-banner-section .blog-banner-wrapper .ban-slider-wrapper .owl-item .item{
    height: 100%;
}
.ban-slider-wrapper .owl-theme .owl-dots{
    position: absolute;
    bottom: 120px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background: #D8031D;
    margin: 0;
}
.owl-theme .owl-dots .owl-dot span{
    margin: 0;
    background: #F2F2F2;
}
.owl-theme .owl-dots{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

/* Responsive Starts */

@media (min-width: 1500px) {
    .blog-banner-section .ban-slide-img {
        width: 55%;
    }
}
@media (min-width: 1600px) {
    .blog-banner-section .ban-slide-img {
        width: 50%;
    }
}
@media (min-width: 1770px) {
    .blog-banner-section .ban-slide-img {
        width: 48%;
    }
}
@media (min-width: 1820px) {
    .blog-banner-section .ban-slide-img {
        width: 45%;
    }
}
@media (min-width: 2000px) {
    .blog-banner-section .ban-slide-img {
        width: 32%;
    }
}

@media (max-width: 1500px) {
    .blog-banner-section {
        height: 100vh;
        padding-top: 0;
    }
    .blog-banner-section .blog-img {
        padding-top: 80%;
    }
}
@media(max-width:1300px){
    .blog-wrapper .blog-main .tabcontentblog {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media(max-width:1200px) {
    .blog-banner-section {
        padding-left: 60px;
    }
    .blog-wrapper .blog-main .tabcontentblog {
        padding-left: 0px;
        padding-right: 0px;
    }
    .blog-wrapper .blog-main {
        margin-top: 60px;
    }
}
@media(max-width:991px) {
    .blog-banner-section {
        padding-left: 60px;
        height: auto
    }
    .blog-banner-section .blog-banner-wrapper {
        height: auto;
        padding-top: 100px;
    }
    .blog-banner-section .bb-head {
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }
    .blog-banner-section .ban-slide-con {
        display: block;
    }
    .blog-banner-section .ban-slide-con .ban-slide-txt {
        width: 100%;
        padding-bottom: 80px;
    }
    .blog-banner-section .ban-slide-img {
        margin-left: auto;
    }
    .blog-wrapper .blog-filter .tab {
        gap: 50px;
    }
    .blog-wrapper .blog-main .tabcontentblog {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width:767px){
    .blog-banner-section {
        padding-left: 30px;
    }
    .blog-wrapper .blog-filter {
        flex-direction: column;
        gap: 20px;
    }
    .blog-wrapper .blog-filter .tab {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 30px;
    }
    .blog-wrapper .blog-filter .tab .tablinksblog {
        width: auto;
    }
    .blog-wrapper .blog-main .tabcontentblog {
        grid-template-columns: repeat(1, 1fr);
    }
    section.blog-wrapper {
        padding: 60px 40px 0 40px;
    }
    .blog-banner-section .ban-slide-img {
        width: 80%;
    }
    .ban-slider-wrapper .owl-theme .owl-dots {
        display: none;
    }
}

/* Responsive Ends */