@use '../../utils' as *;
/*----------------------------------------*/
/*  5.13 case sutdy details css
/*----------------------------------------*/


.case-study {
    &-info {
        padding: 40px 38px;
        padding-bottom: 30px;
        border-radius: 20px;
        transition: .3s;
        background-color: var(--oit-gray-1);
        border: 1px solid rgba($color: #383F3E, $alpha: 0.1);
        @media #{$lg,$md,$xs}{
            padding: 30px 20px;
        }
         & svg {
            transition: .3s;
            color: var(--oit-clr-deep-teal);
        }
        & span {
            font-size: 20px;
            display: block;
        }
        & .title {
            font-weight: 600;
            font-size: 25px;
            line-height: 1.6;
            color: var(--oit-clr-dark-navy);
            @media #{$lg,$md,$xs}{
                font-size: 20px;
            }
        }
        &:hover {
            transform: translateY(-10px);
            & svg {
                transform: scaleX(-1);                
            }
        }
    }
    &-title-sm {
        font-size: 25px;
        font-weight: 500;
        @media #{$lg,$md,$xs}{
            font-size: 20px;
        }
    }
    &-details-area {
        @media #{$xl,$lg,$md,$xs}{
            padding-top: 90px;
            padding-bottom: 60px;
        }
        & .sv-author-info {
            border-radius: 20px;
            border: 1px solid rgba($color: #383F3E, $alpha: 0.1);
        }
        & .bc-funfact-item {
            padding: 30px 50px 30px 35px;
            @media #{$xl,$lg,$md}{
                padding: 30px;
            }
            @media #{$xs}{
                padding: 30px 20px;
            }
        }
    }
    &-content {
        padding-inline-end: 45px;
        margin-inline-end: 15px;
        padding-inline-start: 50px;
        border-inline-end: 1px solid rgba($color: #000, $alpha: 0.1);
        border-inline-start: 1px solid rgba($color: #000, $alpha: 0.1);
        &.pt-120.pb-70{
            @media #{$xl,$lg,$md}{
                padding-top: 90px;
                padding-bottom: 60px;
                margin-inline-end: 0;
                padding-inline-end: 40px;
                border-inline-end: none;
                padding-inline-start: 30px;
            }
            @media #{$xs}{
                padding-top: 90px;
                padding-bottom: 60px;
                margin-inline-end: 0;
                padding-inline-end: 0;
                border: none;
                padding-inline-start: 0;
            }
        }
    }
    &-nav-wrap {
        width: 250px; 
        @media #{$xxl,$xl,$lg,$md,$xs}{
            width: auto;
        }
         & .nav-text{
            display: block;
            font-size: 16px;
            line-height: 1.3;
            letter-spacing: -0.02em;
            color: rgba(56, 63, 62, 0.8);
            position: relative;
            transition: .3s;
            
        }
        & .nav-item{
            &:hover .nav-text { 
                color: var(--oit-clr-dark-navy);
            }
            &:not(:last-child){
                & .nav-text {
                    margin-bottom: 12px;
                }
            }
        }
        & .line-track {
            width: 2px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
        }
    }
}


.nav-item {
    display: flex;
    align-items: stretch;
    gap: 10px;
    cursor: pointer;
}

.line-seg {
    flex: 1;
    min-height: 32px;
    background: #e5e5e5;
    transition: background 0.3s ease;
 }
 
.nav-item.active .line-seg { 
    background: #1D9E75; 
}
.nav-item.done .line-seg { 
    background: #1D9E75; 
}
.nav-item.active .nav-text {
    color: var(--oit-clr-dark-navy); font-weight: 600;
}