/* Product Overview — Icon-based tab header (matches Figma) */
.po-tab-header{
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 48px;
}
.po-tab-header-icon{
    width: 104px;
    height: 104px;
    flex-shrink: 0;
}
.po-tab-header-icon img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.po-tab-header-text h2{
    font-family: 'avenir_next_worldbold', 'Verdana';
    font-weight: normal;
    font-size: 32px;
    line-height: 40px;
    color: #333;
    margin: 0 0 0px;
}
.po-tab-header-text p{
    font-family: 'avenir_next_worldmedium', 'Verdana';
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    color: #707070;
    margin: 0;
}

/* Product Overview tab section overrides */
.aiv4-tab-section{
    padding: 96px 0 0px;
}
.aiv4-tab-item .aiv4-tab-desc{
    font-size: 14px;
    line-height: 24px;
}
.aiv4-tab-display-image{
    border-radius: 4px;
}
.aiv4-tab-image-container{
    padding: 30px 30px;
}
#curriculum-planning .aiv4-tab-item.active::before{
    background: #FFB5C9;
}
#curriculum-planning .aiv4-tab-image-container{
    background: linear-gradient(109deg, var(--Pink-950, #FFF0F6) 8.7%, var(--Pink-800, #FFB5C9) 129.23%);
}

#assessments-gradebook .aiv4-tab-item.active::before{
    background: #C8E487;
}
#assessments-gradebook .aiv4-tab-image-container{
    background: linear-gradient(117deg, var(--Green-950, #F4F9E7) -34.83%, var(--Green-800, #C8E487) 122.04%);
}

#ai-tutors-po .aiv4-tab-item.active::before{
    background: #C3C3FF;
}
#ai-tutors-po .aiv4-tab-image-container{
    background: linear-gradient(113deg, var(--Violet-950, #F3F3FF) -2.92%, var(--Violet-900, #E3E3FF) 104.72%);
}

#student-portfolios .aiv4-tab-item.active::before{
    background: #7FEAF6;
}
#student-portfolios .aiv4-tab-image-container{
    background: linear-gradient(113deg, var(--Blue-950, #E5FBFD) -2.92%, var(--Blue-900, #BFFBFB) 104.72%);
}

#progress-reports .aiv4-tab-item.active::before{
    background: #FFDB7F;
}
#progress-reports .aiv4-tab-image-container{
    background: linear-gradient(113deg, var(--Yellow-950, #FFF8E5) -2.92%, var(--Yellow-900, #FFEEBF) 104.72%);
}

#communications-hub .aiv4-tab-item.active::before{
    background: #C8E487;
}
#communications-hub .aiv4-tab-image-container{
   background: linear-gradient(117deg, var(--Green-950, #F4F9E7) -34.83%, var(--Green-800, #C8E487) 122.04%);
}

#attendance-timetable .aiv4-tab-item.active::before{
    background: #C3C3FF;
}
#attendance-timetable .aiv4-tab-image-container{
   background: linear-gradient(113deg, var(--Violet-950, #F3F3FF) -2.92%, var(--Violet-900, #E3E3FF) 104.72%);
}

#data-analytics .aiv4-tab-item.active::before{
    background: #FFB5C9;
}
#data-analytics .aiv4-tab-image-container{
    background: linear-gradient(109deg, var(--Pink-950, #FFF0F6) 8.7%, var(--Pink-800, #FFB5C9) 129.23%);
}

#behavior-management .aiv4-tab-item.active::before{
    background: #7FEAF6;
}
#behavior-management .aiv4-tab-image-container{
    background: linear-gradient(113deg, var(--Blue-950, #E5FBFD) -2.92%, var(--Blue-900, #BFFBFB) 104.72%);
}

#accreditation-management .aiv4-tab-item.active::before{
    background: #FFDB7F;
}
#accreditation-management .aiv4-tab-image-container{
    background: linear-gradient(113deg, var(--Yellow-950, #FFF8E5) -2.92%, var(--Yellow-900, #FFEEBF) 104.72%);
}

/* Responsive */
@media (max-width: 1300px) and (min-width: 1024px){
    .po-tab-header{gap: 24px;}
    /* .po-tab-header-icon{width: 72px;height: 72px;} */
    .po-tab-header-text h2{font-size: 28px;line-height: 36px;}
}
@media (max-width: 1024px) and (min-width: 991px){
    .aiv4-tab-section{
        padding: 96px 20px 0px;
    }
    .aiv4-tabbings{
        width: 265px;
    }
}
@media (max-width: 991px) and (min-width: 768px){
    .aiv4-tabbings{
        width: 240px;
    }
    .aiv4-tab-image-container {
        padding: 16px;
    }
}
@media (max-width: 1023px) and (min-width: 768px){
    .po-tab-header{gap: 20px;padding: 0 20px;}
    /* .po-tab-header-icon{width: 64px;height: 64px;} */
    .po-tab-header-text h2{font-size: 28px;line-height: 36px;}
}
@media (max-width: 767px){
    .po-tab-header{gap: 16px;padding: 0 16px;}
    .po-tab-header-icon{display: none;}
    .po-tab-header-text h2{font-size: 24px;line-height: 32px;}
}