@use '../../utils' as *;

/*----------------------------------------*/
/*  4.16 event css
/*----------------------------------------*/

.rs-experience{
    &-one{
        padding-top: 100px;
        @media #{$md}{
            padding-top: 80px;
        }
        .rs-experience-wrapper{
            box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.06);
            background: var(--rs-white);
            border-radius: 12px;
            padding-top: 35px;
            padding-inline: 35px;
            padding-bottom: 40px;
            @media #{$laptop}{
                padding-top: 25px;
                padding-inline: 25px;
                padding-bottom: 25px;
            }
        }
        .rs-experience-thumb{
            margin-top: 40px;
            img{
                width: 100%;
                border-radius: 12px;
            }
        }
        .rs-experience-content-wrapper{
            display: grid;
            grid-template-columns: 570px auto;
            gap: 30px 35px;
            @media #{$laptop}{
                grid-template-columns: 450px auto;
                gap: 30px 30px;
            }
            @media #{$lg}{
                grid-template-columns: auto;
            }
            @media #{$md}{
                grid-template-columns: auto;
            }
            &.has-line-border{
                .has-border{
                    &::after{
                        border-color: #FFFFFFFC;
                    }
                    &::before{
                        position: absolute;
                        content: "";
                        width: 1px;
                        height: 100%;
                        background: var(--rs-border-primary);
                        inset-inline-start: 0;
                        top: 5px;
                    }
                }
            }
        }
        .rs-certification-item-wrapper {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 20px;
            max-width: 560px;
            @media #{$sm}{
                max-width: 100%;
                grid-template-columns: repeat(1,1fr);
            }
        }
        .rs-certificate-item{
            .rs-btn{
                box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.02);
                border-bottom: 1px solid var(--rs-border-primary);
                width: 100%;
                padding: 14px 20px;
                justify-content: space-between;
                @media #{$lg}{
                    padding: 14px 14px;
                }
            }
        }
        .has-border{
            position: relative;
            padding-inline-start: 30px;
            @media #{$laptop}{
                padding-inline-start: 20px;
            }
            &::after{
                content: "";
                position: absolute;
                top: 5px;
                inset-inline-start: -8px;
                width: 16px;
                height: 16px;
                background-color: var(--rs-theme-blue);
                border: 3px solid #fff;
                border-radius: 50%;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                z-index: 2;
            }
        }
    }
}