.advanced-visualization-section{
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
    background: var(--d-soft-gradient);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    padding: 140px 60px 160px;
}

.advanced-visualization-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.advanced-visualization-header .main-h2{
    color: var(--d-white);
    text-align: center;
}

.advanced-visualization-header .subtitle-semibold{
    color: var(--light-blue);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 144.444% */
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.advanced-visualization-tab{
    display: flex;
    align-items: center;
    gap: 10px;
}

.advanced-visualization-dot{
    background: var(--d-accent);
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.advanced-visualization-grid{
    display: grid;
    width: 100%;
    gap: 16px;
    grid-template-columns: repeat(12, 1fr);
}

.advanced-visualization-grid .grid-item{
    display: flex;
    min-height: 600px;
    flex-direction: column;
    grid-column: span 4;
    border-radius: 20px;
    justify-content: end;
    align-items: start;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--d-dark-80);
    transition: 0.3s;
    padding: 32px;
    box-sizing: border-box;
}

.advanced-visualization-grid .portfolio-grid-item{
    display: none;
}

.advanced-visualization-grid .video-grid-item{
    grid-column: span 8;
}

.advanced-visualization-grid .grid-item-content{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    align-items: start;
    gap: 16px;
    position: relative;
}

.advanced-visualization-grid .grid-item-content .main-h4{
    color: var(--n-white);
}

.advanced-visualization-grid .grid-item-content .main-text-medium{
    color: var(--d-light-grey);
}

.advanced-visualization-grid .grid-item-bg-layout{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.advanced-visualization-grid .grid-item-bg-image, 
.advanced-visualization-grid .grid-item-bg-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.advanced-visualization-grid .grid-item-bg-layout::after{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    content: '';
    display: block;
    transition: 0.3s;
}

.advanced-visualization-grid .grid-item-bg-layout:has(.grid-item-bg-video)::after{
    background: linear-gradient(180deg, rgba(13, 15, 21, 0.00) 40.24%, rgba(13, 15, 21, 0.80) 100%);
}

.advanced-visualization-section .swiper-main-container, 
.advanced-visualization-section .swiper-notification,
.advanced-visualization-grid .grid-item .link-arrow-icon{
    display: none;
}

@media (hover:hover){
    .advanced-visualization-grid .grid-item:hover{
        border-color: var(--d-dark-accent);
    }

    .advanced-visualization-grid .grid-item:hover .grid-item-bg-layout::after{
        background: rgba(0, 0, 0, 0.30);
    }

    .advanced-visualization-grid .grid-item:hover .grid-item-bg-layout:has(.grid-item-bg-video)::after{
        background: linear-gradient(180deg, rgba(13, 15, 21, 0.30) 40.24%, rgba(13, 15, 21, 0.80) 100%);;
    }
}

@media (max-width: 1919px) {
    .advanced-visualization-section{
        gap: 60px;
        padding: 100px 60px 120px;
    }

    .advanced-visualization-grid .grid-item{
        min-height: 498px;
        padding: 24px;
    }

    .advanced-visualization-grid .grid-item-content{
        gap: 10px;
    }
}

@media (max-width: 1439px) {
    .advanced-visualization-section{
        gap: 48px;
        padding: 80px 40px 100px;
    }

    .advanced-visualization-grid .grid-item{
        border-radius: 16px;
    }

    .advanced-visualization-tab{
        gap: 8px;
    }

    .advanced-visualization-header .subtitle-semibold{
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0.8px;
    }

    .advanced-visualization-dot{
        width: 8px;
        height: 8px;
        border-radius: 2px;
    }
}

@media (max-width: 1279px) {
    .advanced-visualization-section{
        gap: 40px;
        padding: 68px 40px 80px;
    }

    .advanced-visualization-grid .grid-item{
        min-height: 460px;
        grid-column: span 5;
    }

    .advanced-visualization-grid .video-grid-item{
        grid-column: span 7;
    }

    .advanced-visualization-grid .grid-item-content{
        max-width: unset;
    }
}

@media (max-width: 1079px) {
    .advanced-visualization-section{
        padding: 60px 40px 120px;
    }
    
    .advanced-visualization-header .subtitle-semibold{
        font-size: 14px;
        line-height: 26px;
        letter-spacing: 0.7px;
    }

    .advanced-visualization-grid{
        grid-template-columns: repeat(6, 1fr);
    }

    .advanced-visualization-grid .grid-item{
        min-height: 420px;
        gap: 0px;
        grid-column: span 3;
        padding: 20px;
    }

    .advanced-visualization-dot{
        width: 6px;
        height: 6px;
        border-radius: 2px;
    }

    .advanced-visualization-tab{
        gap: 6px;
    }

    .advanced-visualization-grid .video-grid-item{
        grid-column: span 3;
    }

    .advanced-visualization-grid .grid-item .link-arrow-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        position: absolute;
        top: 14px;
        right: 14px;
        background: rgba(1, 15, 47, 0.30);
    }

    .advanced-visualization-grid .grid-item-content .main-text-medium{
        display: none;
    }
}

@media (max-width: 767px) {
    .advanced-visualization-grid{
        display: flex;
        gap: 0;
    }

    .advanced-visualization-grid .portfolio-grid-item{
        display: flex;
        background: linear-gradient(270deg, rgba(37, 95, 232, 0.08) 0%, rgba(49, 105, 233, 0.20) 100%);
        align-items: center;
        justify-content: center;
    }

    .advanced-visualization-grid .grid-item{
        width: 80vw;
        margin-right: 16px;
    }

    .advanced-visualization-section .swiper-main-container{
        display: block;
    }

    .advanced-visualization-section .swiper-pagination-bullet{
        opacity: 1;
        background-color: var(--d-accent-30);
    }
    .advanced-visualization-section .swiper-pagination-bullet-active{
        opacity: 1;
        background-color: var(--d-accent);
    }
}

@media (max-width: 577px) {
    .advanced-visualization-section{
        gap: 40px;
        padding: 100px 16px 80px;
    }

    .advanced-visualization-grid .grid-item{
        min-height: 360px;
    }

    .advanced-visualization-grid .grid-item-content,
    .advanced-visualization-grid .link-arrow-icon {
        will-change: transform, opacity;
        transform: translate3d(0, 0, 0);
    }

    .advanced-visualization-header{
        align-items: flex-start;
        width: 100%;
    }
}